Как выделить ячейки в одной таблице, так как в другой таблице выделяются совпадающие ячейки

У меня есть две таблицы в html-документе:

и .

В каждой таблице 10 столбцов и 5 строк.

Каждая ячейка содержит один или два буквенно-цифровых или специальных (например, *, $, % и т. д.) символов.

Я бы хотел, чтобы он работал следующим образом:

Когда я навожу курсор или выбираю ячейку (в определенной строке, например, в верхней строке) таблицы1, например.

содержащий символ «Z», то символ «Z» будет выделен/выбран в таблице 2, если он появится в той же конкретной строке (т. е. в верхней строке таблицы 2).

Это должно работать наоборот (т.е. наведение/выбор ячейки table2 приводит к выделению/выбору ячейки table1)

Одновременно в каждой строке можно выделить/выбрать только одну ячейку.

Строками можно управлять независимо (т. е. не затрагивая подсветку ячеек других строк).

При втором нажатии выделение должно исчезнуть.

Можно ли это сделать с помощью CSS или JavaScript? (предпочтителен CSS), но оба полезны. Заранее большое спасибо за вашу любезную помощь. С уважением, Фред