JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:470px;overflow:auto;">
    <span> First Table</span>
    <table class="table">
        <tbody class="interactive">
        <tr>
            <td>First Table td</td>
            <td>First Table td</td>
            <td>First Table td</td>
            <td>First Table td</td>
        </tr>
        <tr>
            <td>SecondTabletd</td>
            <td>Second Table td</td>
            <td>Second Table td</td>
            <td>Second Table td</td>
        </tr>
        <tr>
            <td>Third Table tr td aaa</td>
            <td>Third Table tr td aaa</td>
            <td>Third Table tr td aaa</td>
            <td>Third Table tr td aaa</td>
        </tr>
            <tr>
            <td>Fourth Table td</td>
            <td>Fourth Table td</td>
            <td>Fourth Table td</td>
            <td>Fourth Table td</td>
        </tr>  
     </tbody>
</table>
</div>
<div><span> Second Table</span>
    <table class="table">
        <tbody class="interactive">
        <tr>
            <td>Action Button</td>
        </tr>
        <tr>
            <td>Action Button</td>
        </tr>
        <tr>
            <td>Action Button</td>
        </tr>
         <tr>
            <td>Action Button</td>
        </tr>
     </tbody>
</table>
</div>

CSS

div{
    float:left;
    margin-top:25px;
    margin-right:5px;    
}
 
span{
    background:#eaeaea;
    color:green;
}
td{
    padding:5px;
    border:1px solid gray;
    /*white-space:nowrap;*/
    word-wrap: break-word;
}


.hoverx{
    background-color:Red ;
    color:lime;
}
.selectedRow{
    color:blue;
    background:yellow;
}

JavaScript

$(function(){
    var rows = $('.interactive tr');
    rows.click(function () {
        var i = $(this).GetIndex() + 1; // nth-child is 1-based
        rows.removeClass('selectedRow');
        rows.filter(':nth-child(' + i + ')').addClass('selectedRow');
    });
    
    rows.hover(function(){
        var i = $(this).GetIndex() + 1;
        rows.filter(':nth-child(' + i + ')').addClass('hoverx');
    },function(){         
        rows.removeClass('hoverx');
    });
});

jQuery.fn.GetIndex = function(){
    return $(this).parent().children().index($(this));
}