title: jquery input append items and split list into columns with a MAX limit
body: <p>With this code I can split a list into columns with a <b>max column limit (8)</b>,<br>
  it works, but the problem comes when I add new items by a text input:</p>
  
  <p>new items are added, but there are some bugs with the lists and with new items..</p>
  
  <pre><code>$(window).load(function(){
      splitColumns();
  });
  
  function addFun(value){
      $('.LAST').append('&lt;div class="BB"&gt;&lt;span&gt;'+value+'&lt;/span&gt;&lt;button onclick="$(this.parentElement).remove();"&gt;x&lt;/button&gt;&lt;/div&gt;');
      splitColumns();
  }
  
  
  function splitColumns(){
      var itemindex = 0;
      var Jlistobj = null;
      $('.AA .BB').each(function(){
          if (itemindex % 8 == 0){
              Jlistobj = $('&lt;div class="AA"&gt;&lt;/div&gt;');
          }
          Jlistobj.append($(this));
          $('.cont').append(Jlistobj);
          itemindex++;
      });
      $('.cont .AA:first').css({'display':'none'});
      $('.cont .AA:last').addClass('LAST');
  }
  </code></pre>
  
  <p><br>
  When I try to add a new item, it is not only added to the last column, but also to the other columns<br>
  and the max columns limit is not longer respected...
  <br></p>
  
  <p>It is driving me crazy.. Any help is really much appreciated</p>
  
  <p>Thank you in advance
  <br>
  <h2>Please have a look at this <b><a href="http://jsfiddle.net/ujd4k/1/" rel="nofollow">FIDDLE</a></b></h2><br>
  (press return to add items with text input)</p>