JSFiddle - React, Tailwind, and code Playground

by Claudius

HTML

<div class="stmatst_legends">
    <div>
        <span class="legend">C1:</span><span class="legendvalue">a</span>
    </div>
    <div>
        <span class="legend">C2:</span><span class="legendvalue">b</span></div>
    <div>
        <span class="legend">C3:</span><span class="legendvalue">c</span></div>
</div>

<table id='stmstat'>
    <tbody>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
        <tr>
            <td>
                col1
            </td>
            <td>
                col2
            </td>
            <td>
                col3
            </td>
        </tr>
    </tbody>
</table>

CSS

.hover {
    background-color: red;
}

JavaScript

$(".legendvalue", ".stmatst_legends").hover(function() {
    var index = $('.legendvalue').index($(this));

    $('table#stmstat tbody td:nth-child(' + index + ')').each(function(index) {
        $(this).addClass('hover');
    });


}, function() {
    //remove hover

});