On my webpage, I have set up two tables positioned side by side like this:
<!DOCTYPE html>
<table>
<tr>
<td>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</td>
<td>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</td>
</tr>
</table>
Whenever I hover over a cell in either table, I want the corresponding cell in the other table to also be highlighted at the same time (for example, hovering over [0,0] should highlight [0,0] in the other table).
To achieve this effect for one table, I followed the guidance in this link (using addClass and removeClass instead of toggleClass). How can I extend this functionality to cover both tables?