Html table checkbox filter with table search bar unwanted behavior

I need some advice from you. I have implemented checkbox filtering of HTML table on website and work well. Now i trying to implement searchbar over the table, but i cant achieve to cooperate with existing checkboxes. These is my prerequisities:

1. Search only in first column
2. Serch for only plain text (no links, images and formating symbols)
3. When i check checkbox, then search bar searches only in filtered items, not search hidden items. With this part of code i achieved only first 2 points, but i cant achieve to search only for displayed items. Search box still search for all items (hidden by checkbox)

Thanks for your advices

<style>
table, tr, td, th{
    border: 1px solid blue;
    padding: 2px;
}

table th{
    background-color: #999999;
}


        .datatbl td:nth-of-type(5) {
        display: none;
        }
        .datatbl th:nth-of-type(5) {
        display: none;
        }

        table.datatbl tr:nth-child(even) {
  background: #455168;
}

</style>

    <tbody>
        <tr>
            <td rowspan="2"  style="padding: 0px 0px 0px 0px;"><b>Item Type</b></td>
            <td style="padding: 0px 0px 0px 0px;"><input id="One" name="filter" type="checkbox" value="11" /> 11</td>
            <td style="padding: 0px 0px 0px 0px;"><input id="One" name="filter" type="checkbox" value="22" /> 22</td>

</tr>

</tbody>
</table>


<table class="datatbl">
    <tr><th>Unique ID</th><th>Random ID</th><th>Random ID</th><th>Random ID</th><th>Random ID</th></tr>
    <tr><td><a href="http://ift.tt/1BZEETG">214215</a></td><td>44211</td><td>Random ID</td><td>Random ID</td><td>11</td></tr>
    <tr><td>1252512</td><td>55622</td><td>Random ID</td><td>Random ID</td><td>22</td></tr>
    <tr><td>2114</td><td>466611</td><td>Random ID</td><td>Random ID</td><td>11</td></tr>
    <tr><td>3245466</td><td>33411</td><td>Random ID</td><td>Random ID</td><td>11</td></tr>
    <tr><td>24111</td><td>5436422</td><td>Random ID</td><td>Random ID</td><td>22</td></tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

<script src="http://ift.tt/2nYZfvi"></script>
<script
  src="http://ift.tt/1tN20gW"
  integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8="
  crossorigin="anonymous"></script>
<script>
var $rows = $(".datatbl").find("tr:not(:hidden)");
$("#search").on("keyup", function() {
    var value = $(this).val();

    $rows.each(function(index) {
        if (index !== 0) {

            $row = $(this);

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

            if (id.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});




</script>

<script>
            jQuery('.datatbl tr > *:nth-child(5)').hide();

            jQuery(document).on('ready', function () {
                var filter_magic = function (e) {
                    var trs = jQuery('.datatbl tr:not(:first)');

                    trs.hide();
                    var showAll = true;
                    jQuery('input[type="checkbox"][name="filter"]').each(function () {
                        if (jQuery(this).is(':checked')) {
                            var val = jQuery(this).val();
                            trs.each(function () {
                                var tr = jQuery(this);
                                var td = tr.find('td:nth-child(5)');
                                if (td.text() === val) {
                                    tr.show();
                                    showAll = false;
                                }
                            });
                        }
                    });
                    if (showAll) {
                        trs.show();
                    }
                };

                jQuery('input[type="checkbox"][name="filter"]').on('change', filter_magic);
                filter_magic();
            });
</script>