JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.microsoft.com/ajax/jquery.ui/1.12.1/themes/black-tie/jquery-ui.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.js"></script>
<li class="ui-widget-content copy-me">I am programatically created</li>

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content remove-me">Item 7</li>
</ol>

CSS

.copy-me {
  display: none;
}

#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: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

JavaScript

$(document).ready(function(){
	$( "#selectable" ).selectable({
  	start: function(){
    	// Display the number of bindings stored on the selectable instance. This number should be 1:1 with the number of selectable elements.
    	alert('Number of bindings: ' + $( "#selectable" ).selectable('instance').bindings.length)
      // Programatically remove a selectable element
      $('.remove-me').remove()

			// Programatically add a selectable element
			copyMe = $('.copy-me').clone().removeClass('copy-me').addClass('remove-me')
      $('#selectable').append(copyMe)
    }
  });
})