Reorder li in order for ultiple ul-list with javascripts

I want to re-order several ul-list on my web.
Each ul with the same class should be in numerical order after using javascript.

The list may look like below

 <ul class="filelist">
     <li data-sortby="3">3</li>
     <li data-sortby="2">2</li>
     <li data-sortby="1">1</li>
     <li data-sortby="4">4</li>
 </ul>
 <ul class="filelist">
     <li data-sortby="5">5</li>
     <li data-sortby="2">2</li>
     <li data-sortby="1">1</li>
     <li data-sortby="4">4</li>
 </ul>

I want them show in order like

 <ul class="filelist">
     <li data-sortby="1">1</li>
     <li data-sortby="2">2</li>
     <li data-sortby="3">3</li>
     <li data-sortby="4">4</li>
 </ul>
 <ul class="filelist">
     <li data-sortby="1">1</li>
     <li data-sortby="2">2</li>
     <li data-sortby="4">4</li>
     <li data-sortby="5">5</li>
 </ul>

I tried the code down below

$(document).ready(function() {
   var ul = $('ul.filelist');
   for (let u = 0; u < ul.length; u++) {
       const element = ul[u];

       li = element.querySelectorAll('li');

                    
       li.detach().sort(function(a,b) {
       return $(a).data('sortby') - $(b).data('sortby');  
       });
                    
      u.append(li);
                }

     });

But the error indicated that li.detach is not a function.
Could someone help me solve this problem?
Thanks!