How to highlight cells in one table as matching cells in another table are highlighted

I have two tables in an html document <table id="table1"> and <table id="table2">.
There are 10 columns and 5 rows in each table.
Each cell contains either one or two alphanumeric or special (e.g. *, $ , % etc) characters.

I would like it to function as follows:

When I hover or select a cell (on a specific row – e.g. top row) of table1, e.g. containing the "Z" character, then the "Z" character will be highlighted /selected on table2 if it appears on the same specific row (i.e. top row of…

How to highlight cells in one table as matching cells in another table are highlighted