JSFiddle - React, Tailwind, and code Playground

by andrew rowe

HTML

<table style="border: 1px solid black;">
    <tr><td>1</td><td class="board-cell" style="" id="board-cell-0-0">
        <input class="board-input" style="" type="text" value="" name="cell-0-0" id="cell-0-0" maxlength="1" size="1"/></td><td>2</td></tr>
</table>

<table style="border: 1px solid black;">
    <tr><td  class="word-found word-cell-1" id="-0-0">7,7 T<br>To=2.</td></tr>
</table>

CSS

.word-cell-1 {background-color:red}

JavaScript

$("word-found").mouseover(function() { 
        id=$(this).attr("id");
        $(this).addClass('cell-highlight' ); 
        secondid = "#board-cell"+id;
        alert(secondid)
        $(secondid).addClass('cell-highlight');
      }).mouseout(function() { 
        $(this).removeClass('cell-highlight' );
        id=$(this).attr("id");
        secondid = "#board-cell"+id;
        $(secondid).removeClass('cell-highlight'); 
    });