JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-list">
    <li><a href="#">Category 1</a>
        <ul class="list-unstyled">
            <li><a href="#">Name</a></li>
            <li><a href="#">Name</a></li>
            <li><a href="#">Name</a></li>
            <li><a href="#">Name</a></li>
        </ul>
    </li>
    <li><a href="#">Category 2</a>
        <ul class="list-unstyled">
            <li><a href="#">Name</a></li>
            <li><a href="#">Name</a></li>
            <li><a href="#">Name</a></li>
        </ul>
    </li>
    <li><a href="#">Category 3</a>
        <ul class="list-unstyled">
            <li><a href="#">Name</a></li>
        </ul>
    </li>
    <li><a href="#">Category 4</a>
        <ul class="list-unstyled">
            <li><a href="#">Name</a></li>
        </ul>
    </li>
    <li><a href="#">Category 5</a>
        <ul class="list-unstyled">
            <li><a href="#">Name</a></li>
        </ul>
    </li>
    <li><a href="#">Category 6</a>
        <ul class="list-unstyled">
            <li><a href="#">Name</a></li>
        </ul>
    </li>
    <li><a href="#">Category 7</a>
        <ul class="list-unstyled">
            <li><a href="#">Name</a></li>
        </ul>
    </li>
</ul>

<div class="result"></div>

JavaScript

var firstUl = $("<ul>");
var secondUl = $("<ul>");
var size = $(".main-list li").size();
var elements = $(".main-list li");
size--;

for(var i = 0; i < size; i++) {
    firstUl.append(elements[i]);
}

secondUl.append(elements[size++]);

$(".result").append(firstUl);
$(".result").append(secondUl);