JSFiddle - React, Tailwind, and code Playground

by Komlan

HTML

<ol id="selectable">
  <li class="ui-widget-content" id="ok"> 1</li>
  <li class="ui-widget-content"> 2</li>
  <li class="ui-widget-content"> 3</li>
  <li class="ui-widget-content"> 4</li>
  <li class="ui-widget-content"> 5</li>
  <li class="ui-widget-content"> 6</li>
  <li class="ui-widget-content"> 7</li>
</ol>
<br/>
<input id="lol" type="button" value="LOL" />

CSS

#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; width: 550px; }
    #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }

JavaScript

$( "#selectable" ).selectable();
$('#lol').click(function(){
                alert('dsfds');
    $('#selectable  .li ok').selectable('destroy');
});