How to make both dynamic parent list and sub-list sortable using jQuery?


I have the following structure:

<ul class="concepts">
  <button type="button" id="add_concept">ADD CONCEPT</button>
  <p>Container of Concepts</p>
  <li class="courseConcept">
    <p>This is a concept</p>
    <div class="conceptContent">
      <div class="content">
        This is content within concept
    <button type="button">ADD CONTENT</button>

Output of the above code:

Here, both the <ul> and <li>'s should be sortable?

And how can I receive the updated order when I reorder both the sub-list i.e. <li> and as well as when <ul>?


Question. When you test the HTML in the validator does it pass?


Your code is illegal; you can't put any tags within a <ul> other than the <li> tags. <p> and <button> are illegal in <ul> tags. So your structure will not work properly.

See if this page gives you the sorting structure you need:


The following from your HTML code is not valid.

<ul class="concepts">
  <button type="button" id="add_concept">ADD CONCEPT</button>


That the HTML is valid is only the start to make it work properly.

You can find the sortable example here:

But there are also good vanilla js alternatives: