JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
    <tr>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
    </tr>
        <tr>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
    </tr>
        <tr>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
    </tr>
        <tr>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
    </tr>
        <tr>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
        <td class="catch">Cell</td>
    </tr>
    </tbody>
</table>


<div id="log"></div>

CSS

.green {
 background-color: green;
}

#main{
 border: 1px solid black;   
 padding: 20px
}

.catch {
 border: 1px solid blue;
 padding: 10px;
}

JavaScript

function highlightHoveredObject(x, y) {
    console.log("hightlightHoveredObject With:")
    console.log(x)
    console.log(y)
    
    $('td').each(function() {
      // check if is inside boundaries
      if (!(
          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
      )) {
          
          
              
        $('td').removeClass('green');
        $('tr').removeClass('green');
          
        //Do row and column highlighting+
       
           var index, selector, parent;
                    index = ($(this).index() + 1);
     
                    parent = ($(this).parent('tr'));
                    $(parent).addClass("green");
                   

                    selector = "tbody td:nth-child(" + index + ")";
                    $(selector).addClass("green");
          
          
        $(this).addClass('green');
      }
    });
}


$("td").bind("touchmove", function(evt){
  var touch = evt.originalEvent.touches[0]
  highlightHoveredObject(touch.clientX, touch.clientY);
});