JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div id="menu"><ul>
    <li>one one one</li>
    <li>two</li>
    <li>three</li>
    <li>four four four</li>
    <li>five five five five</li>
    <li>six six</li>
    <li>seven seven</li>
    <li>eight eight </li>
    <li>one one one</li>
    <li>two</li>
    <li>three</li>
    <li>four four four</li>
    <li>five five five five</li>
    <li>six six</li>
    <li>seven seven</li>
    <li >eight eight</li>
    <li>one one one</li>
    <li>two</li>
    <li>three</li>
    <li>four four four</li>
    <li>five five five five</li>
    <li>six six</li>
    <li>seven seven</li>
    <li>eight eight</li>
</ul>
</div>

CSS

ul{
    border:1px solid red;
    margin:0;
    padding:0;
    display:inline-block;
}

li { 
    line-height: 20px;
    width: 150px;
   
    display:block;
    border:1px solid blue;
    vertical-align:top;
}

/* general sibling selector ("~") works down to IE7 */
.newrow {
    border:2px solid orange;
    clear:left;
    
}

JavaScript

var menu = $("#menu");
var liColumns = {
    total : menu.find('li').length,
    listItems : menu.find('li'),
    split : 8   
}


console.log(menu)
console.log(liColumns);
for (var i=0;i < liColumns.total; i++){
    
    if (i === liColumns.split){
        liColumns.split += liColumns.split;
        $(liColumns.listItems[i]).after("</ul>");
         $(liColumns.listItems[i]).after("<ul>"));
           console.log($(liColumns.listItems[i]).text());
    }
    
}