Live search in table rows with rowspan

I have a table which contains rowspans in the the first column. I have a code but when I search it collapse. My table looks something like this: Table.

HTML:

<table>
    <tr><th>XY</th><th>ZW</th></tr>
    <tr><td rowspan="2">321</td><td>242</td></tr>
    <tr><td>513256</td></tr>
    <tr><td>33131</td><td>13</td></tr>
    <tr><td>4131</td><td>334132</td></tr>
    <tr><td rowspan="3">51311</td><td>54424</td></tr>
    <tr><td>54424</td></tr>
    <tr><td>5442</td></tr>
    <tr><td>511</td><td>544</td></tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

JS:

$("#search").on("keyup", function() {
    var value = $(this).val();

    $("table tr").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();
            }
        }
    });
});