JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <!-- HTML Header start -->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <!-- place holder for including the style sheet -->
    </head>
    <body>
        <div id="entryfield">
            <label>maximun number of column:</label>
            <input id="maxcolumn" type="text" value="" />
            <br/>
            <label>minimum column-size:</label>
            <input id="mincolumnsize" type="text" value="" />
            <br/>
            <input id="trigger" type="button" value="start"/>
        </div>
        <ul style="list-style-type: none;"></ul>
    </body>
</html>

JavaScript

var timerId = 0;
var number = 1;
$(function() {
    $('#trigger').click(function() {
        var trigger = $('#trigger').val();

        if(trigger == 'start') {
            timerId = setInterval(function() {
                $('#trigger').val('stop');
                main(++number);
            }, 1000);
        } else if(trigger == 'stop') {
            clearInterval(timerId);
            $('#trigger').val('start');
        }
    });
});

function main(i) {
    var max_column = parseInt($("#maxcolumn").val());
    var range = new Array();
    range = set_range(1, i, 1);
    console.log('This is the list');
    console.log(range);
    var new_range = new Array();
    var min_column_size = parseInt($("#mincolumnsize").val());
    var remainder_item = parseInt(range.length % min_column_size);
    var start = 0;
    var quotient = parseInt(range.length / min_column_size);
    if(quotient > min_column_size) {
        min_column_size = quotient;
    }
    var end = min_column_size + Math.min(1, remainder_item);
    console.log('The split happens after this number in the list');
    console.log(end);
    //This is the list
    //[1, 2, 3, 4, 5, 6]
    // new_range = [1,2,3] {1st loop}
    //new_range = [4,5,6]  {2nd loop}
    for( i = 1; i <= max_column; i++) {
        new_range = range.splice(start, end);
        console.log(new_range);
        var new_range_length = new_range.length;

        for( j = 0; j < new_range_length; j++) {
            $('ul').append('<li>' + new_range[j] + '</li>');
        }
        remainder_item = parseInt(range.length % min_column_size);
        start = 0;
        quotient = parseInt(range.length / min_column_size);
        if(quotient > min_column_size) {
            min_column_size = quotient;
        }
        end = min_column_size + Math.min(1, remainder_item);
    }
}

function set_range(start, stop, step) {
    var result = [];
    for(var i = start; step > 0 ? i < stop : i > stop; i += step) {
        result.push(i);
    };
   ...