JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <span class='catch' id="a">One</span>
    <span class='catch' id="b">Two</span>
    <span class='catch' id="c">Three</span>
    <span class='catch' id="d">Four</span>
    <span class='catch' id="e">Five</span>
    <span class='catch' id="f">Six</span>
    <span class='catch' id="g">Seven</span>
</div>

<div id="second">
    <span class='hatch'>One</span>
    <span class='hatch'>Two</span>
    <span class='hatch'>Three</span>
    <span class='hatch'>Four</span>
    <span class='hatch'>Five</span>
    <span class='hatch'>Six</span>
    <span class='hatch'>Seven</span>
</div>

CSS

.green {
 background-color: green;
}

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

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

JavaScript

function highlightHoveredObject(x, y) {
    $('.catch').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()
      )) {
              
        $('.catch').removeClass('green');
        $(this).addClass('green');
      }
    });
}
    
$(".catch").bind("touchmove", function(evt){
    var touch = evt.originalEvent.touches[0]
      
    var startTime = new Date;      
      
    highlightHoveredObject(touch.clientX, touch.clientY);
    var totalTime = (new Date - startTime) / 1000;
    
    console.log('Execution time for .catch: ' + totalTime);
});

$('.hatch').bind('touchmove', function (evt) {
    var touch = evt.originalEvent.touches[0];
    
    var startTime = new Date;
        
    var el = $(document.elementFromPoint(touch.clientX, touch.clientY));
    
    if (el.hasClass('hatch')) {
        $('.hatch').removeClass('green');
        el.addClass('green');        
    }
    
    var totalTime = (new Date - startTime) / 1000;
  
    console.log('Execution time for .hatch: ' + totalTime);
});