Everything was fine until I used only one table per page. Now I have a page with 14 tables (results of a questionarie). The highlight on the rows are OK, but the columns are highlighted allways on the uppermost table, even if the mouse is over a lower one. The HTML markup is OK.
Removed some code repetition, used mouseenter instead of mouseover and also fixed the bug of not finding the related colgroup elements. CodePen sample also includes code to add new rows so you can see it is indeed dynamic.