Move elements with jquery based on data attr with appendTo - html

Question

What I need is that, when loading the site, move the li element into the ul element based on the datta attr. I did it, but for some reason, it doesn't work.
<li class="classeul_name" data-nivelpai="BR04ZJCTF000">Nivel 1</li>
<li class="classeul_name" data-nivelpai="BR055XCTF003">Nivel 2</li>
<ul data-geral1="BR04ZJCTF000">
</ul>
<ul data-geral1="BR055XCTF003">
</ul>
jQuery
$(window).on("load", function(){
// Joga o nível 2
liName = $('.classeul_name').data('nivelpai');
$('li[data-nivelpai="'+liName+'"]').appendTo($('ul[data-geral1="'+liName+'"]'));
});

Answer 1

Instead on window load event you need to use the dom ready event:
$(function () { .... });
Moreover you need to loop on elements (i.e. .each()) and append() element.
The snippet:
$('.classeul_name').each(function(idx, ele) {
var newPlace = '[data-geral1="' + ele.dataset.nivelpai + '"]';
$(newPlace).append(ele)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="classeul_name" data-nivelpai="BR04ZJCTF000">Nivel 1</li>
<li class="classeul_name" data-nivelpai="BR055XCTF003">Nivel 2</li>
<ul data-geral1="BR04ZJCTF000">
</ul>
<ul data-geral1="BR055XCTF003">
</ul>

Answer 2

Putting li out of ul isn't valid HTML. I think it is better to do this work in server side. However you need to loop through every li and append it to relevant ul.
$(function(){
$('.classeul_name').each(function(){
$(this).appendTo($('ul[data-geral1="'+$(this).data('nivelpai')+'"]'));
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="classeul_name" data-nivelpai="BR04ZJCTF000">Nivel 1</li>
<li class="classeul_name" data-nivelpai="BR055XCTF003">Nivel 2</li>
<ul data-geral1="BR04ZJCTF000">
</ul>
<ul data-geral1="BR055XCTF003">
</ul>
Also you can use .append() instead
$(function(){
$('ul[data-geral1]').append(function(){
return $('li[data-nivelpai="'+$(this).data('geral1')+'"]')
})
})