ساخت صفحه html جستجو و تب دار

[AHF-victory]

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

باید برای هر تب آی دی جداگونه تعریف کنید و توی کد بالا همون مقدار رو قرار بدید. مثلا myInput2,myInput1

ممنون

<div class="tab">
    <button class="tablinks" onclick="openCity(event, 'teh-5')">تهران مرکز</button>
    <button class="tablinks" onclick="openCity(event, 'teh-4')">تهران جنوب</button>
    <button class="tablinks" onclick="openCity(event, 'teh-3')">تهران غرب</button>
    <button class="tablinks" onclick="openCity(event, 'teh-2')">تهران شرق</button>
    <button class="tablinks" onclick="openCity(event, 'teh-1')">تهران شمال</button>
</div>

<div id="teh-5" class="tabcontent">
    <h3>تهران مرکز</h3>
    <p>London is the capital city of England.</p>
</div>

<div id="teh-4" class="tabcontent">
    <h3>تهران جنوب</h3>
    <p>Paris is the capital of France.</p>
</div>

<div id="teh-3" class="tabcontent">
    <h3>تهران غرب</h3>
    <p>Tokyo is the capital of Japan.</p>
</div>

<div id="teh-2" class="tabcontent">
    <h3>تهران شرق</h3>
    <div class="container">
        <h2>Filterable Table</h2>
        <p>Type something in the input field to search the table for first names, last names or emails:</p>
        <input class="form-control" id="teh-2" type="text" placeholder="Search..">
        <br>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody id="myTable">
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@mail.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@greatstuff.com</td>
            </tr>
            <tr>
                <td>Anja</td>
                <td>Ravendale</td>
                <td>a_r@test.com</td>
            </tr>
            </tbody>
        </table>

        <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
    </div>

    <script>
        $(document).ready(function(){
            $("#teh-2").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
</div>

<div id="teh-1" class="tabcontent">
    <h3>تهران شمال</h3>
    <div class="container">
        <h2>Filterable Table</h2>
        <p>Type something in the input field to search the table for first names, last names or emails:</p>
        <input class="form-control" id="teh-1" type="text" placeholder="Search..">
        <br>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody id="myTable">
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@mail.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@greatstuff.com</td>
            </tr>
            <tr>
                <td>Anja</td>
                <td>Ravendale</td>
                <td>a_r@test.com</td>
            </tr>
            </tbody>
        </table>

        <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
    </div>

    <script>
        $(document).ready(function(){
            $("#teh-1").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
</div>

<script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>

الان به این شکل گذاشتم اما بازم نمیشه جستجو کار نمیکنه