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 mouseout', function () {
    var i = this.cellIndex,
        pi = this.parentNode.rowIndex,
        cell = this.parentNode.parentNode.rows[i].cells[pi];

    $(this).add(cell).toggleClass('hover');
});