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>

JavaScript

function wrapLi( parent ){
        var numChildren = $( parent ).children( 'li' ).length,
            wrappers = [];
        
        for( var i = 0; i < numChildren / 6; i++ ){
            wrappers[i] = $( '<ul class="main-list"></ul>' );
            
            // the meat and potatoes... select the first six elements of the matched set
            // check out http://www.w3schools.com/jquery/jquery_ref_selectors.asp
            wrappers[i].append( $( parent ).children( 'li:lt(6)' ) );
        }
        
        return wrappers; // the array of <ul> that you can put wherever you want
    }
    
    var stuff = wrapLi(  $( '.main-list' ) );
    
    $( 'body' ).append( stuff );