JSFiddle - React, Tailwind, and code Playground

by aalouv

HTML

<ul>
  <li><a href="#">COLUMN 1</a></li>
  <li><a href="#">col 1.1</a></li>
  <li><a href="#">Apsum</a></li>
  <li><a href="#">Aonor</a></li>
  <li><a href="#">Aomsdomsdio</a></li>
  <li><a href="#">Asdijnd oasd</a></li>
  <li><a href="#">Awrom</a></li>
  <li><a href="#">Aoidn iojd</a></li>
  <li><a href="#">Apyrie sdij</a></li>
  <li><a href="#">Asddewdwe</a></li>    
  <li><a href="#">Apsum</a></li>
  <li><a href="#">Aonor</a></li>
  <li><a href="#">Aomsdomsdio</a></li>
  <li><a href="#">Asdijnd oasd</a></li>
  <li><a href="#">Awrom</a></li>
  <li><a href="#">Aoidn iojd</a></li>
  <li><a href="#">Apyrie sdij</a></li>
  <li><a href="#">Last entry col 1</a></li>
</ul>

JavaScript

$(document).ready(function(){
    var colCount = 3,
            ul = $('ul').clone(),
            li = ul.find('li'),
            liLen = li.length,
            liPerCol = Math.ceil(liLen / colCount),
            ulWrap = '<ul>',
            liSub,
            i;
    
        $('ul').remove();
        var ul = $('ul');
    for(i = 0; i < liPerCol; i++){
        liSub = li.slice(liPerCol*i, liPerCol*(i+1));
        liSub.wrap($(ulWrap));
        console.log(liSub);
        liSub.appendTo(ul);
    }
    });