JSFiddle - React, Tailwind, and code Playground

HTML

<div id="01" class="parent">01</div>
<div id="01_01" class="child">01_01</div>
<div id="01_02" class="child">01_02</div>
<div id="01_02_01" class="sub-child">01_02_01</div>
<div id="01_02_02" class="sub-child">01_02_02</div>
<div id="01_02_03" class="sub-child">01_02_03</div>

<div id="02"  class="parent">02</div>
<div id="02_01" class="child">02_01</div>

<div id="03" class="parent">03</div>
<div id="03_01" class="child">03_01</div>
<div id="03_02" class="child">03_02</div>
<div id="03_02_01" class="sub-child">03_02_01</div>
<div id="03_02_02" class="sub-child">03_02_02</div>




<!-- Должно быть так:

<div id="01" class="parent">
  <div id="01_01" class="child"></div>
  <div id="01_02" class="child">
    <div id="01_02_01" class="sub-child"></div>
    <div id="01_02_02" class="sub-child"></div>
    <div id="01_02_03" class="sub-child"></div>  
  </div>
</div>

<div id="02"  class="parent">
  <div id="02_01" class="child"></div>
</div>

<div id="03" class="parent">
  <div id="03_01" class="child"></div>
    <div id="03_02" class="child">
    <div id="03_02_01" class="sub-child"></div>
    <div id="03_02_02" class="sub-child"></div>
  </div>  
</div>


-->

CSS

.child,
.sub-child{
  margin-left: 15px;
}

JavaScript

var $els = $('div').detach();

$.each($els, function(el_i, el) {
	var id = $(el).attr('id').split('_');
  var curr;
  if (id.length == 1) {
		$('body').append(el);
	}
  else {
    for(i=0; i<id.length-1; i++) {
      curr = (curr) ? curr + '_' + id[i] : id[i];
    }
    $('#'+curr).append(el);
  }
});