JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="ronak">
<ul class="ui-sortable c">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
<ul class="ui-sortable a">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
<ul class="ui-sortable b">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
</div>
<button id="btn">
add
</button>

CSS

.ui-sortable {
  width: 200px;
  height: 100px;
  background: red;
  
}

JavaScript

$('.ui-sortable').sortable({
			connectWith: $('.ui-sortable'),
			placeholder: "highlight",
			helper: 'clone',
			delay: 100
      });
      
      $('#btn').on('click', function(){
      var element = $('<ul class="ui-sortable b"><li>test</li><li>test</li><li>test</li></ul>');
      	element.appendTo('#ronak');
        $('.ui-sortable').sortable({
			connectWith: $('.ui-sortable'),
			placeholder: "highlight",
			helper: 'clone',
			delay: 100
      });
      });