JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    
</table>

CSS

table {
    table-layout:fixed;
    width:100%;
    height:300px;
    border-collapse:collapse;
}
td {
    border:1px solid black;
}
.hover {
    background:pink;
}

JavaScript

$('td').on('mouseover', function(){
    var that = $(this);
    that.addClass('hover');
    var x = that.index();
    var y = that.closest('tr').index();
    $('table').find('tr').eq(x).find('td').eq(y).addClass('hover');
}).on('mouseout', function() {
    var that = $(this);
    $('td').removeClass('hover');
})