I need to create a feature where hovering over a row in the first table will highlight a corresponding row in the second table. The highlighting should be based on the index of the hovered row.
Here is an example:
<div>
<table>
<tr><td>table 1 row 1</td></tr> // => hovered
<tr><td>table 1 row 2</td></tr>
<tr><td>table 1 row 3</td></tr>
</table>
</div>
<div>
<table>
<tr><td>table 2 row 1</td></tr> // => highlighted
<tr><td>table 2 row 2</td></tr>
<tr><td>table 2 row 3</td></tr>
</table>
</div>