JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div  class='toto'>
  <ul id='sortable'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>  
</div>

<ul class='tata' id='tutu'>

</ul>

<button id='btn'>Ajouter</button>
<button id='btn2'>Ajouter</button>

JavaScript

$( "#sortable" ).sortable();

// délégation d'évenements
 $(document).on('click', function(e){
  var $target = $(e.target);
   if($target.hasClass('titi')){
     $target.parent('.tata').sortable();
   }
 });

$('#btn').on('click', function(){
  $('#sortable').append('<li>999</li>')
});

$('#btn2').on('click', function(){
  $('#tutu').append('<li class="titi">999</li>')
})