Search Record From Table Using jQuery in Asp.net core MVC

Table Code :

<div class="row">

    <div class="col-md-12">

        <div class="card">

            <div class="card-body">

                <div class="">

                    <table id="tblAccount" class="table table-bordered">

                        <thead>

                            <tr>

                                <th>Account </th>

                                <th>Website</th>

                                <th>Email</th>

                                <th>Phone</th>

                                <th>Website</th>

                                <th>Type</th>

                                <th>Country</th>

                                <th class="text-nowrap">Action</th>

                            </tr>

                        </thead>

                        <tbody>

                            @foreach (var item in Model)

                            {

                            <tr>

                                <td>@item.AccountName</td>

                                <td>@item.Website</td>

                                <td></td>

                                <td></td>

                                <td></td>

                                <td></td>

                                <td></td>

                                <td class="text-nowrap">

                                    <a data-toggle="tooltip" asp-controller="Account" asp-action="EditAccount" asp-route-AccountId="@item.Id" data-original-title="Edit" class="btnEdit"> Edit</a>

                                    @if (item.StatusId == (Int32)Enums.RowStatus.Deactive)

                                    {

                                        <a data-toggle="tooltip" href="javascript:void(0)" onclick="ActivateAccount(@item.Id)" data-original-title="Activate" class="btnEdit"> | Activate</a>

                                    }

                                    else

                                    {

                                        <a data-toggle="tooltip" href="javascript:void(0)" onclick="DeactivateAccount(@item.Id)" data-original-title="Deactivate" class="btnEdit"> | Deactivate</a>

                                    }

                                    <a data-toggle="tooltip" href="javascript:void(0)" onclick="DeleteAccount(@item.Id)" data-original-title="Delete" class="btnEdit"> | Delete</a>

                                </td>

                            </tr>

                            }

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

SearchBox Code   : 

<div class="row">

    <div class="col-md-3   d-none d-md-block">

        <div class="input-group mb-3">

            <input type="text" id="txtSerach" class="form-control">

            <div class="input-group-append"><button onclick="btnSerach()" class="btn btn-primary"><i class="fas fa-search"></i></button></div>

        </div>

    </div>

</div>

jQuery Code  :

$("#txtSerach").on("keyup", function () {

    var value = $(this).val();

    // remove all highlighted text passing all em tags

    removeHighlighting($("#tblAccount em"));

    $("#tblAccount tr").each(function (index) {

        if (index !== 0) {

            $row = $(this);

            var $tdElement = $row.find("td:first");

            var id = $tdElement.text();

            var matchedIndex = id.indexOf(value);

            if (matchedIndex != 0) {

                $row.hide();

            }

            else {

                //highlight matching text, passing element and matched text

                addHighlighting($tdElement, value);

                $row.show();

            }

        }

    });

    function removeHighlighting(highlightedElements) {

        highlightedElements.each(function () {

            var element = $(this);

            element.replaceWith(element.html());

        })

    }

    function addHighlighting(element, textToHighlight) {

        var text = element.text();

        var highlightedText = '<em>' + textToHighlight + '</em>';

        var newText = text.replace(textToHighlight, highlightedText);

        element.html(newText);

    }

});