I have a razor pages project where i need the user to select between filtering between some ports and the names of variables, i kinda got the search bar working, but I can't make the other one work.

Here's what I've got so far:

<div class="col-12 border text-left p-3 mt-3" id="filterdiv">
    <div id="dropdown">
        @Html.DropDownList("ports", (IEnumerable<SelectListItem>)ViewData["ports"], new { @id = "portdd" })
    </div>
    <div id="searchbar">
        <p>
            Name: <input type="text" name="SearchString" id="searchb"/>
        </p>
    </div>
</div>

@* FILTER BY PORTS *@
<script type="text/javascript">
    $(document).ready(function () {
        $('#portdd').change(function () {
            var value = this.value;
            $('tr:gt(0):not($(#' + value + '):attr(id))').hide();
        });
    });
</script>

@* FILTER BY NAME *@
<script type="text/javascript">
    $(document).ready(function () {
        $('#searchb').change(function () {
            var value = this.value;
            $('tr:gt(0):not(:contains(' + value + '))').hide();
        });
    });
</script>

But it's not working as intended. Any help would be appreciated.