JSFiddle - React, Tailwind, and code Playground

HTML

<table width="300px"> 
    <tr class="tr1">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr class="tr2">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr class="tr1">
        <td>5</td>
        <td>6</td>
    </tr>
    <tr class="selected">
        <td>7</td>
        <td>8</td>
    </tr>
    <tr class="tr1">
        <td>9</td>
        <td>0</td>
    </tr>
</table>

CSS

.tr1{
background-color: #e9e9e9;
}
.tr2{
background-color: #ffffff;
}
.selected{
    
    color:#000000;
    background-color: #ffefd5;  
}

.linghtbar{
color:#000000;
    background-color: #d9e9ff;    

}

JavaScript

if (typeof (jQuery) === 'undefined')
{
                alert('jQuery Library NotFound.');
}
try 
{
    $('table tr td').hover(function() 
    {
        var hoverIndex = $(this).index();
        $(this).parents('table').find('td').filter(':nth-child('+(hoverIndex+1)+')').addClass('linghtbar');
    },function()
    {
        $(this).parents('table').find('td').removeClass('linghtbar');
    });
}
catch (err) 
{
};