JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo" style="width:520px; height:300px;">

    
<ol id="selectable">
  <li id="1" class="ui-state-default">1</li>
  <li id="2" class="ui-state-default">2</li>
  <li id="3" class="ui-state-default">3</li>
  <li id="4" class="ui-state-default">4</li>
  <li id="5" class="ui-state-default">5</li>
  <li id="6" class="ui-state-default">6</li>
  <li id="7" class="ui-state-default">7</li>
  <li id="8" class="ui-state-default">8</li>
  <li id="9" class="ui-state-default">9</li>
</ol>

    
<input id="1" type="checkbox">
<input id="2" type="checkbox">
<input id="3" type="checkbox">
<input id="4" type="checkbox">
<input id="5" type="checkbox">
<input id="6" type="checkbox">
<input id="7" type="checkbox">
<input id="8" type="checkbox">
<input id="9" type="checkbox">
   
    
<p id="feedback">
<span>Youve selected:</span> 
<span id="select-result">none</span>.
</p>
</div>

CSS

<style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; }
  #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
  </style>

JavaScript

$(function() {

    $("#selectable").bind("mousedown", function(e) {
        e.metaKey = true;
    }).selectable({
        stop: function() {
            var result = $("#select-result").empty();
            $(".ui-selected", this).each(function() {
                var index = $("#selectable li").index(this);
                result.append(" #" + (index + 1));
            });

        }

    });
});