JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<ul id="data" class="Column1" style="float:left;">
<!-- developed by subhra-->
    
  <li>list Item 1</li>
  <li>list Item 2</li>
  <li>list Item 3</li>
  <li>list Item 4</li>
  <li>list Item 5</li>
  <li>list Item 6</li>
  <li>list Item 7</li>
  <li>list Item 8</li>
  <li>list Item 9</li>
  <li>list Item 10</li>
  <li>list Item 11</li>
  <li>list Item 12</li>
  <li>list Item 13</li> 


  
</ul>
<div id='app'></div>

CSS

ul{float :left;}
li {
    list-style:none;
}

JavaScript

$(document).ready(function () {
      var size = $("#data > li").size();
      var noOfCulm = 3;   
    
   var min_item_perCol = Math.floor( size / noOfCulm );
   var offset = size - min_item_perCol*noOfCulm;
   items_per_col = new Array() 

   var offsetadd = Math.ceil( offset / noOfCulm  );
   var isadd = 0;

   for (var i = 0; i < noOfCulm ; i++) {
            if (i < noOfCulm - 1 ) {
                items_per_col[i] = min_item_perCol + offsetadd ;
                isadd++;
            } else {
                items_per_col[i] = items_per_col[i-1] - offsetadd*isadd;
            }
        }
   

alert( items_per_col );
    
    pointer = 1;
    for (var i = 0; i < noOfCulm ; i++) {
       $('#app').append('<ul id=sub_'+ i +'></ul>');

       for (var j = 0; j < items_per_col[i]; j++) {
        $( '#sub_' + i ).append( '<li>' + $(".Column1 > li:nth-child("+ pointer +")").html() + '</li>' ); 
           
        pointer ++;   
       }

    }
   $(".Column1").remove();
  });