JSFiddle - React, Tailwind, and code Playground

HTML

Pick color:
<input class="getColor" type="color" name="favcolor">
<div class="selector">
    <div class="one1"></div>
    <div class="one2"></div>
    <div class="one3"></div>
    <div class="one4"></div>
    <div class="one5"></div>
    <div class="one6"></div>
    <div class="one7"></div>
    <div class="one8"></div>
    <div class="one9"></div>
    <div class="one10"></div>
    <div class="one11"></div>
    <div class="one12"></div>
    <div class="one13"></div>
    <div class="one14"></div>
    <div class="one15"></div>
    <div class="one16"></div>
    <div class="one17"></div>
    <div class="one18"></div>
    <div class="one19"></div>
    <div class="one20"></div>
    <div class="one21"></div>
    <div class="one22"></div>
    <div class="one23"></div>
    <div class="one24"></div>
    <div class="one25"></div>
    <div class="one26"></div>
    <div class="one27"></div>
    <div class="one28"></div>
    <div class="one29"></div>
    <div class="one30"></div>
    <div class="one31"></div>
    <div class="one32"></div>
    <div class="one33"></div>
    <div class="one34"></div>
    <div class="one35"></div>
    <div class="one36"></div>
    <div class="one37"></div>
    <div class="one38"></div>
    <div class="one39"></div>
    <div class="one40"></div>
</div>
<div class="rotation">
    <div class="order one1"></div>
    <div class="order one2"></div>
    <div class="order one3"></div>
    <div class="order one4"></div>
    <div class="order one5"></div>
    <div class="order one6"></div>
    <div class="order one7"></div>
    <div class="order one8"></div>
    <div class="order one9"></div>
    <div class="order one10"></div>
    <div class="order one11"></div>
    <div class="order one12"></div>
    <div class="order one13"></div>
    <div class="order one14"></div>
    <div class="order one15"></div>
    <div class="order one16"></div>
    <div class="order one17"></div>
    <div class="order one18"></div>
    <div class="order one19"></div>
    <div...

CSS

.selector {
    width: 400px;
    background: #d3d3d3;
    cursor:crosshair;
    margin-bottom: 250px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.rotation {
    width: 400px;
    height: 100px;
    background-color: white;
}
.selector > div {
    width:40px;
    height:40px;
    border:1px solid #d3d3d3;
    background:white;
    float:left;
    box-sizing:border-box;
}
.order {
    background:yellow;
    float:left;
    width:40px;
    height: 40px;
}
.empty {
    display:none;
}

JavaScript

var clicking = false;
$(".getColor").change(function () {
    var getColor = $(".getColor").val();
    var color = getColor;
    $('.selector').mousedown(function () {
        clicking = true;
        $('.clickstatus').text('mousedown');
        $(".selector > div").click(function () {
            var myClass = $(this).attr("class");
            $(".empty").text(myClass);
            var getVal = $(".empty").text();
            $("." + getVal + "").css("background", color);
            console.log(getVal);
        });
    });

    $('.selector').mouseup(function () {
        clicking = false;
    });
    $('.selector').mousemove(function () {
        if (clicking) {
            $(".selector > div").hover(function () {
                if (clicking) {
                    var myClass = $(this).attr("class");
                    $(".empty").text(myClass);
                    var getVal = $(".empty").text();
                    $("." + getVal + "").css("background", color);
                    alert(getVal);
                }
            });
        }
    });
    $(".selector").mouseleave(function () {
        clicking = false;
    });
});