JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="$('#foo').columnize(2)">2 Col</button>
<button onclick="$('#foo').columnize(3)">3 Col</button>
<button onclick="$('#foo').columnize(4)">4 Col</button>
<button onclick="$('#foo').columnize(5)">5 Col</button>
<ul id="foo">
  <li>1</li>
  <li>2</li>
    <li>3</li>

    <li>4</li>
      <li>5</li>
    <li>6</li>

    <li>7</li>
    
    <li>8</li>

  <li>9</li>


    <li>10</li>
    <!--

    <li>11</li>

    <li>12</li>  

    <li>13</li> 

   <li>14</li> 
 -->
</ul>

CSS

ul li {
      height:20px;
      width: 40px;
      text-align: center;
      border: 1px solid #CCC;
      background-color: #EEE;
      color: #000;
      padding: 5px;
      float: left;
      margin: 0;
    }
    ul {
      margin: 0; padding: 0;
      list-style: none;
    }

JavaScript

(function($) {
    $.fn.decolumnize = function() {
        this.children().map(function(index, el) {
            var oldPos = null;
            var posClass = null;
            if($(el).attr("class") && (posClass = $(el).attr("class").match(/orig\-readorder\-[0-9]+/))) {
                oldPos = parseInt(posClass[0].replace("orig-readorder-", ""));
                $(el).removeClass(posClass[0]);
            }
            return {
                elm: el,
                pos: oldPos ? oldPos : index
            }
        }).sort(function(a,b) {
            return a.pos > b.pos ? 1 : -1;
        }).map(function(index, ob) {
            return ob.elm;
        }).appendTo(this);
        return this.children().css("float", "left").css("clear", "none");
    };
    $.fn.columnize = function(numcols) {
        var numItems = this.children().length;
        var divisor = Math.ceil(numItems / numcols);
        
        var someFlag = Math.ceil(numItems / divisor) < (divisor * numcols) / divisor;
        var indexOfFinal = null;       
        this.decolumnize();
     
        
        var resorted = this.children().map(function(index, el) {
            return {
                position: someFlag && index == numItems - 1 ?  0 : (index % divisor),
                elm: el,
                isFinal: index == numItems - 1,
                origPos: index
            };
        }).sort(function(a, b) {
            return (
                a.position == b.position ? 
                    (a.origPos > b.origPos ? 1 : -1) : 
                    (a.position > b.position ? 1 : -1)
            );
        });
        return resorted.map(function(index, ob) {
            if (indexOfFinal) {
                if ((index - indexOfFinal - 1) % (numcols - 1) == 0) {
                    if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
                    $(ob.elm).css("clear", "left");
                }
            } else {
                if (index %...