How to make a tree using jQuery?

Question

JavaScript

Good day!
There is a large list like this:

<ul>
  <li data-category-id="1" data-category-parent-id=""></li>
  <li data-category-id="2" data-category-parent-id="1"></li>
  <li data-category-id="3" data-category-parent-id=""></li>
  <li data-category-id="4" data-category-parent-id=""></li>
  <li data-category-id="5" data-category-parent-id="1"></li>
  <li data-category-id="6" data-category-parent-id=""></li>
  <li data-category-id="7" data-category-parent-id=""></li>
  <li data-category-id="8" data-category-parent-id="3"></li>
  <li data-category-id="9" data-category-parent-id="6"></li>
  <li data-category-id="10" data-category-parent-id="6"></li>
</ul>

You need a tree like this:

<ul>
  <li data-category-id="1" data-category-parent-id="">
    <ul>
      <li data-category-id="2" data-category-parent-id="1"></li>
      <li data-category-id="5" data-category-parent-id="1"></li>
     </ul>
  </li>
  <li data-category-id="3" data-category-parent-id="">
    <ul>
      <li data-category-id="8" data-category-parent-id="3"></li>
    </ul>
  </li>
  <li data-category-id="4" data-category-parent-id=""></li>
  <li data-category-id="6" data-category-parent-id="">
    <ul>
        <li data-category-id="9" data-category-parent-id="6"></li>
        <li data-category-id="10" data-category-parent-id="6"></li>
    </ul>
  </li>
  <li data-category-id="7" data-category-parent-id=""></li>
</ul>

Each li tag has a "data-category-id" and a "data-category-parent-id" attribute. The first one stores the unique id of the category, and the second one tells which element is its parent. In other words, everything is mixed up and you need to make sure that the child elements become nested to the parent.
data-category-id - category id
data-category-parent-id - parent id. If id == null, then this is the root category

How to make a tree with nested lists using jQuery?

I tried this, but only one element is added, but I can’t figure out how to find everything and add it

$(document).ready(function() {
                $("li").each(function () {
                    var parentId = $(this).data('category-id');
                    var test = $("li[data-category-parent-id = " + parentId + "]").html();
                    if (test) {
                        $(this).append("<ul><li>" + test + "</li><ul>");
                    }
                });
            });

Answer 1

$('li[data-category-parent-id=""]').append("<ul></ul>");

$("li").each(function(){
  var dts = this.dataset.categoryParentId;
  dts&&$("li[data-category-id="+dts+"] > ul").append(this);
});

Ps: I think it can be better...
UPD: Test