Q:

Why is my JS script not working on my ASPNET View?  How to use my script in the correct way? 

I'm having problems with my JS script and I truly don't know why, because I know it's well written because it's already being used in another application. 
I'm adding everything in order:

bootstrap.min.js
jquery.min.js
bootstrap.min.js

This is how I'm adding the files I need in my page

 public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {

            bundles. Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.min.css",
                        "~/Content/site.css"));

            bundles. Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-3.4.1.min.js"));

            bundles. Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate.min.js"));

            bundles. Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-2.8.3.js"));

            bundles. Add(new ScriptBundle("~/bundles/popper").Include(
                        "~/Scripts/umd/popper.min.js"));

            bundles. Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/popper-utils.min.js"));

            bundles. Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.min.js"));
        }
    }

This is my script, and I put it on the head of my _layout.html file
    <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript">
        $(document).ready(function() {
            $("#search").on("keyup", function () {
                var value = $(this).val().toLowerCase();

                $("#div > a").show().filter(function() {                           //Select all anchor elements and show them
                    return $(this).find('a').text().toLowerCase().indexOf(value) === -1;  //Find the anchor and check if the value is substring of the text.  Return true if not found. 
                }).hide();                                                          //Hide all anchors that the value is not the substring of text
            });
        });
    </script>

And this is the body of my View.  This is where the script should work.  

<div id="accordion">
    @foreach (var item in Model)
    {
        <div class="card">
            <div class="card-header bg-dark text-light" id="headingOne">
                <h5 class="mb-0">
                    <a class="btn btn-link" data-toggle="collapse" data-target="#e-@item.directoryName" aria-expanded="false">
                        <i class="fa fa-folder-open"></i>
                        @item.directoryName
                    </a>
                </h5>
            </div>

            <div id="e-@item.directoryName" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="my-2 my-lg-0 card-body">
                    <i class="fa fa-search"></i><input class="form-control mr-sm-2 ml-2 d-inline" type="text" placeholder="Search..." id="search"> <!--  Here is where I start to use my js script.  This is the input-->
                </div>
                <div class="card-body overflow-auto" id="div" style="max-height: 300px">
                    @foreach (string file in @item.fileName)
                    {
                        <a class="dropdown-item list-unstyled" href="#">@file</a> <!--  Here are the elements i'm trying to search-->
                    }
                </div>
            </div>

        </div>
    }
</div>

I wanted to create a Search filtering content, but I don't know why it's not working on my view

A:

Well, I solved this error after 7 hours at least.  It was not that the syntax only work correctly with server controls.  The problem was how I was calling my scripts in the first place. 
The script only worked with the first div.  And it was because of the name I have to the id's.  
To solve this problem I used a little razor syntax with my script. 
Here's the solution:
@model IEnumerable<_3VA_MES.Models. Recipe>

@{
    ViewBag. Title = "Recipe";
}

@section scripts {
    @foreach (var item in Model)
    {
        <script type="text/javascript">
            $(document).ready(function () {
                $("#@item.directoryName").on("keyup", function () {
                    var value = $(this).val().toLowerCase();

                    $("#@item.directoryName-mydiv > *").filter(function () {                           //Select all anchor elements and show them
                        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);  //Find the anchor and check if the value is substring of the text.  Return true if not found. 
                    });                                                          //Hide all anchors that the value is not the substring of text
                });
            });
        </script>
    }
}

<h2>@ViewBag. Title.</h2>
<br />
<h3>@ViewBag. Message</h3>
<br />

<div id="accordion">
    @foreach (var item in Model)
    {
        <div class="card">
            <div class="card-header bg-dark text-light" id="headingOne">
                <h5 class="mb-0">
                    <a class="btn btn-link" data-toggle="collapse" data-target="#e-@item.directoryName" aria-expanded="false">
                        <i class="fa fa-folder-open"></i>
                        @item.directoryName
                    </a>
                </h5>
            </div>

            <div id="e-@item.directoryName" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="my-2 my-lg-0 card-body">
                    <i class="fa fa-search"></i><input class="form-control mr-sm-2 ml-2 d-inline" type="text" placeholder="Search..." id="@item.directoryName"> <!--  Here is where I start to use my js script.  This is the input-->
                </div>
                <div class="card-body overflow-auto" id="@item.directoryName-mydiv" style="max-height: 300px">
                    @foreach (string file in @item.fileName)
                    {
                        <a class="dropdown-item list-unstyled" href="#" name="@file">@file</a> <!--  Here are the elements i'm trying to search-->
                    }
                </div>
            </div>

        </div>
    }
</div>

P.S. I won't post the _Layout.cshtml because it don't really matter.  The problem was on my view.