JSFiddle - React, Tailwind, and code Playground

by tanakaworld

HTML

<h1>Touch Sequence</h1>
<div id="main">
    <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>
    <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');
            }
        }
    });

    panel.each(function (i, val) {
        $(this).text(i + 1);
    });
});