JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li class="level-0">level 0</li>
  <li class="level-1">level 1</li>
  <li class="level-1">level 1</li>
  <li class="level-2">level 2</li>
  <li class="level-2">level 2</li>
  <li class="level-1">level 1</li>
  <li class="level-0">level 0</li>
  <li class="level-1">level 1</li>
  <li class="level-2">level 2</li>
  <li class="level-3">level 3</li>
  <li class="level-2">level 2</li>
  <li class="level-3">level 3</li>
  <li class="level-0">level 0</li>
  <li class="level-0">level 0</li>
  <li class="level-1">level 1</li>
  <li class="level-0">level 0</li>
  <li class="level-1">level 1</li>
  <li class="level-1">level 1</li>
</ul>

JavaScript

function wrap(ul, level = 0) {
  const
    currLevel = `.level-${level}`,
    nextLevel = `.level-${level + 1}:first`;

  let $li = null;
  while (($li = $(ul).children(nextLevel)).length) {
    const $ul = $('<ul></ul>');
    $ul.append($li.nextUntil(currLevel).addBack().last().after($ul).end());
    wrap($ul, level + 1);
  }
}

wrap($('ul'));