JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title>test</title>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</body>
</html>

CSS

ul {margin-bottom: 10px; border: 1px solid red;}

JavaScript

var items = $('ul li');
var list = $('ul');
var secondList = "<ul>";
if(items.length > 0) {
    var index = parseInt(items.length / 2)  ;
    for(var i=index; i<items.length; i++){
        secondList += "<li>" + items[i].innerHTML + "</li>";
        $(items[i]).remove();
    }
    secondList += "</ul>";
    $(secondList).insertAfter(list);
}