displaying the dynamically growing list

UPDATE1: Updated the JS fiddle link sorry set interval was not working as I wanted it to

I have a array which is dynamically growing (number getting added every 1 sec). I have to split this list and display it in columns, I am actually have problem displaying the list inside the ul and li(yes only ul and li no tables). The user can specify the max number of columns(Stop adding columns once there are this many) and the minimum column height(No added column may contain fewer than this many items). Also, the number of items in any added column must be either the same as, or 1 fewer than for the previous column. The output for max column =3 and min column height =3

What I was able to do so far is:

1. use set interval to add number every 1 sec




2. put the incoming numbers in an array like [1] , [1,2] ... [1,2,3,4] after 4 sec. This array is called range




3. split the main array (range) into sub array (new_range) for eg if the main array

   
   
   

   (range) = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

   
   
   

   new_range (after 1st loop) = [1, 2, 3, 4]

   
   
   

   new_range (after 2nd loop) = [5, 6, 7]

   
   
   

   new_range (after 3rd loop) = [8, 9, 10]




4. so now I need to display each new range vertically using ul and li so i tried doing something like $('ul').append('<li>' + new_range[j] + '</li>'); were j is the new_range array index

I have problem displaying the li items next to each other like the sample output using CSS, It would be great if someone could tell me how to display the li items after each iteration next to each other

JS fiddle link

---