JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

.green {
 background-color: green;
}

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

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

JavaScript

$(".catch").bind("touchmove", function(evt){
    $(".catch").removeClass("green");
    //there is only 1 touch in the array
    //console.log(evt.originalEvent.touches)
    var touch = evt.originalEvent.touches[0]
    touch.target.className="catch green"
    $("#log").prepend(touch.target.innerHTML + 
        " - X: " + touch.clientX +
        " - Y: " + touch.clientY + "<br>");

    // This seems to work, but can't be the right way
    //    document.elementFromPoint( touch.clientX, touch.clientY)
    //        .className="catch green";
})