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 table2).
This should work in reverse (i.e. hovering /selecting table2 cell causes table1 cell to highlight /select)
Only one cell at a time on each row can be highlighted /selected.
Rows can be independently controlled (i.e. without affecting any other row's cell highlighting).
With a second click the highlight should be removed.

Can this be done with CSS or JavaScript? (CSS preferred) but both useful.

Many thanks in advance for your kind help.

Regards,

Fred