JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<ol class="sortable-list">
  <li id="listItem-1">
    Todo 1
    <ol id="listItem-1-subtasks" class="sortable-list">
    </ol>
  </li>
  <li id="listItem-2">
    Todo 2
    <ol id="listItem-2-subtasks" class="sortable-list">
    </ol>
  </li>
  <li id="listItem-2">
    Todo 3
    <ol id="listItem-2-subtasks" class="sortable-list">
    </ol>
   </li>
</ol>

CSS

ol ol {
  margin: 10px auto;
  background: #eee; 
  border-bottom: 1px solid #999;
  min-height: 10px;
}

JavaScript

var newSubTask = '';

$('#listItem-1-subtasks').append("<li>A Sub Task 1</li>");
$('#listItem-1-subtasks').append("<li>A Sub Task 2</li>");
$('#listItem-1-subtasks').append("<li>A Sub Task 3</li>");
$('#listItem-2-subtasks').append("<li>A Sub Task A</li>");

$( ".sortable-list" ).sortable({
  connectWith: ".sortable-list"
}).disableSelection();