javascript - Highlight 2 rows by class or ID in separate tables -

i creating 2 tables dynamically in php , want able compare rows in 2 tables. want able hover highlight row in either table , corresponding row (by id) in other table highlight well.

i've found many references similar situations on here, seem work hover on row 1 highlight row 1 in table 2. want highlight function row id (or class, not sure more appropriate).

in example below if hover on row id 123 in table 1, row id 123 in table 2 highlight. , reverse, highlighting row id 123 in table 2 highlight row id 123 in table 1.

the trick here these rows may in sort of order, counting or doing nth stuff wont work here.

<table id="t1">     <tr id="123"><td>......</td></tr>     <tr id="456"><td>......</td></tr>     <tr id="789"><td>......</td></tr>     <tr id="0ab"><td>......</td></tr>     <tr id="cde"><td>......</td></tr> </table> <p>table 2</p> <table id="t2">     <tr id="cde"><td>......</td></tr>     <tr id="123"><td>......</td></tr>     <tr id="0ab"><td>......</td></tr>     <tr id="456"><td>......</td></tr>     <tr id="789"><td>......</td></tr> </table> 

i'm crap javascript , jquery. @ total loss @ point. trying hack other solutions work beyond me @ point.

id can not repeated within single html document. hence modify html make use of class instead of id. , can refer below code logic:

$(document).ready(function() {    $("table tr").hover(function() {        $("tr").removeclass("highlight");        $("." + $(this).attr("class")).addclass("highlight");      },      function() {          $("." + ($(this).attr("class").split(' '))[0]).removeclass("highlight");      });  });

.highlight {    background: gray;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <table id="t1">    <tr class="123">      <td>......</td>    </tr>    <tr class="456">      <td>......</td>    </tr>    <tr class="789">      <td>......</td>    </tr>    <tr class="0ab">      <td>......</td>    </tr>    <tr class="cde">      <td>......</td>    </tr>  </table>  <p>table 2</p>  <table id="t2">    <tr class="cde">      <td>......</td>    </tr>    <tr class="123">      <td>......</td>    </tr>    <tr class="0ab">      <td>......</td>    </tr>    <tr class="456">      <td>......</td>    </tr>    <tr class="789">      <td>......</td>    </tr>  </table>