JSFiddle - React, Tailwind, and code Playground

by Strernd

HTML

<div class="markbox-grid">
    <div class="markbox-box" data-region="1">1</div>
    <div class="markbox-box" data-region="2">2</div>
    <div class="markbox-box" data-region="3">3</div>
    <div class="markbox-box" data-region="4">4</div>
    <div class="markbox-box" data-region="5">5</div>
    <div class="markbox-box" data-region="6">6</div>
    <div class="markbox-box" data-region="7">7</div>
    <div class="markbox-box" data-region="8">8</div>
    <div class="markbox-box" data-region="9">9</div>
    <div class="markbox-box" data-region="10">10</div>
    <div class="markbox-box" data-region="11">11</div>
    <div class="markbox-box" data-region="12">12</div>
    <div class="markbox-box" data-region="13">13</div>
    <div class="markbox-box" data-region="14">14</div>
    <div class="markbox-box" data-region="15">15</div>
    <div class="markbox-box" data-region="16">16</div>
    <div class="markbox-box deactivated" data-region="17" data-group="1">17</div>
    <div class="markbox-box deactivated" data-region="18" data-group="1">18</div>
    <div class="markbox-box deactivated" data-region="19" data-group="1">19</div>
    <div class="markbox-box deactivated" data-region="20" data-group="1">20</div>
    <div class="markbox-box" data-region="21">21</div>
    <div class="markbox-box" data-region="22">22</div>
    <div class="markbox-box" data-region="23">23</div>
    <div class="markbox-box deactivated" data-region="24" data-group="2">24</div>
    <div class="markbox-box deactivated " data-region="25" data-group="2">25</div>
    <div class="markbox-box deactivated" data-region="26" data-group="2">26</div>
    <div class="markbox-box" data-region="27">27</div>
    <div class="markbox-box" data-region="28">28</div>
    <div class="markbox-box" data-region="29">29</div>
    <div class="markbox-box" data-region="30">30</div>
    <div class="markbox-box" data-region="31">31</div>
    <div class="markbox-box" data-region="32">32</div>
    <div class="markbox-box"...

CSS

.markbox-grid {
    padding: 20px;
    width: 360px;
    overflow: hidden;
    border: 2px solid black;
}
.markbox-box {
    font-family: Arial;
    text-align:center;
    padding: 19px;
    width: 12px;
    height: 12px;
    float: left;
    background-color: rgba(0, 255, 0, 0.3);
    margin: 5px;
}
.markbox-box.active {
    background-color: rgba(0, 0, 255, 0.3);
}
.markbox-box.active.deactivated, .markbox-box.deactivated {
    background-color: rgba(255, 0, 0, 0.3);
}

.markbox-box.active.deactivated.highlight, .markbox-box.deactivated.highlight {
    background-color: rgba(255, 165, 0, 0.3);
}

JavaScript

$(document).ready(function () {
    var trigger = false;
    var add = false;
    $('.markbox-box').mousedown(function (e) {
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
        trigger = true;

        if ($(this).hasClass('active')) {
            add = false;
        } else {
            add = true;
        }

        if (add) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }

    });

    $('body').mouseup(function () {
        trigger = false;
        var output = "";
        $('.markbox-grid .active').each(function () {
            if (!$(this).hasClass('deactivated')) {
                output += "Region: " + $(this).data('region') + "<br>";
            }
        });

        $('.selected pre').html(output);
    });
    $('body').mouseleave(function () {
        trigger = false;
        var output = "";
        $('.markbox-grid .active').each(function () {
            if (!$(this).hasClass('deactivated')) {
                output += "Region: " + $(this).data('region') + "<br>";
            }
        });

        $('.selected pre').html(output);
    });

    $('.markbox-box').mouseenter(function (e) {
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
        if (trigger) {
            if (add) {
                $(this).addClass('active');
            } else {
                $(this).removeClass('active');
            }
        }

    });
    
    $('.deactivated').mouseenter(function (e) {
         var boxGroup = $(this).data("group");
        $(".markbox-box[data-group="+boxGroup+"]").addClass("highlight");
    });
        $('.deactivated').mouseleave(function (e) {
         var boxGroup = $(this).data("group");
        $(".markbox-box[data-group="+boxGroup+"]").removeClass("highlight");
    });



});