JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Touch Sequence</h1>
<div id="main">
    <span class='panel' id="1"></span>
    <span class='panel' id="2"></span>
    <span class='panel' id="3"></span>
    <span class='panel' id="4"></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
    <span class='panel'></span>
</div>
<h3>by @tanaka_yutaro</h3>

CSS

#main {
    padding: 10px
}

.green {
    background-color: lightseagreen;
}

.panel {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid;
    padding: 10px;
    display: inline-block;
    margin-top: 5px;
}

JavaScript

$().ready(function () {
    var panel = $('.panel');
    panel.on({
        'mouseenter': function () {
            var target = $(this);
            if (target.hasClass('panel')) {
                target.addClass('green');
                
            }
        },
        'touchmove': function (event) {
            var touch = event.originalEvent.touches[0];
            var target = $(document.elementFromPoint(touch.clientX, touch.clientY));

            if (target.hasClass('panel')) {
                target.addClass('green');
                                target.addClass('panel');
                var idname = $(this).attr("id"); 
            if(idname == 1){console.log("1")}
            else if(idname == 2){console.log("2")}
            else if(idname == 3){console.log("3")}
            else if(idname == 4){console.log("4")}
            }
        }
    });


        }
    });


});