JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul class="catalog">
   <li>header 1
      <ul>
        <li>subcat 1
            <ul>
               <li>subcat subcat 1</li>
               <li>subcat subcat 2</li>
               <li>subcat subcat 3</li>
            </ul>
        </li>
        <li>subcat 2</li>
        <li>subcat 3</li>
      </ul>
   </li>
   <li>header 2
      <ul>
        <li>subcat 4</li>
        <li>subcat 5</li>
        <li>subcat 6</li>
      </ul>
    </li>
</ul>

CSS

ul { padding-left: 10px; }

JavaScript

$(".catalog > li").wrapAll("<li><div class='something'><ul></ul></div></li>");