JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
   <li> 4 </li>
   <li> 1 </li>
   <li> 7 </li>
   <li> 5 </li>
   <li> 3 </li>
 </ul>

CSS

ul {
    border-bottom: 1px solid #000;
}

JavaScript

var originalUl = $('ul');
var listElements = originalUl.children('li'); //List
listElements.sort(function(x, y){
    return parseInt(x.textContent, 10) - parseInt(y.textContent);
});
//Sorted by number, 1, 2, 3, ...

var newList = $("");
listElements.each(function(i){
    if(i%2 == 0){ //If even, a new list has to be created
        originalUl.before(newList);
        newList = $("<ul>"); //Create new list
    }
    newList.append(this);
});
if(newList.length) originalUl.before(newList);
originalUl.remove(); //Remove original, empty ul.