JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<ul id='selected-items'>
  <li class='item'>Original Lesson</li>
  <li class='item'>Lesson 2</li>
  <li class='item'>Lesson 3</li>
  <li class='item'>Lesson 4</li>
  <li class='item'>Lesson 5</li>
  <li class='item'>New Lesson</li>
</ul>
<button id="add">add</button>
<p>
    Clicking the "Add" button should move item 2 after item 3 (i.e. they switch positions).<br>
    After that the defined "update" callback from the sortable is called and should add the text " (update called)" to the moved item.<br>
    Pushing the button twice would then lead to " (update called)" being attached to item 2 and 3.
</p>

JavaScript

$('#selected-items').sortable({
  update:function(event, ui){
    //ui.item.append(' (update called)');
  }
});

$('#add').click(function() {
  var $moveItem =  $("li:contains('Original')");
  $('#selected-items').sortable('option','update')(null, {
    item: $($moveItem).after($("li:contains('New')"))
  });
});