title: list in 5 columns with jQuery
body: <p>I have a problem to seperate a ul list in 5 parts. The list is something like:</p>
  
  <pre><code>&lt;ul class="designer-list"&gt;  
  &lt;li&gt;7 title&lt;/li&gt;
  &lt;li&gt;alpha&lt;/li&gt;
  &lt;li&gt;charlie&lt;/li&gt;
  &lt;li&gt;charles&lt;/li&gt;
  &lt;li&gt;lima&lt;/li&gt;
  &lt;/ul&gt;    
  </code></pre>
  
  <p>with this jQuery I put the first character on top</p>
  
  <pre><code>$(document).ready(function(){
  
      var lastCharacter = '';
      var list = $('ul.designer-list li');
  
      list.each(function() {
          var $this = $(this);
          var firstCharacter = $this.text().trim().charAt(0);
          if(firstCharacter != lastCharacter) {
  
              $this.before('&lt;li class="first-character"&gt;&lt;span&gt;'+firstCharacter+'&lt;/span&gt;&lt;/li&gt;');
  
              lastCharacter = firstCharacter;
          }
      });
  });
  </code></pre>
  
  <p>that makes this:
  7
  7 title
  A
  alpha
  C
  Charlie
  Charles
  L
  Lima</p>
  
  <p>That works fine, but I want to separate the list in 5 columns. If I try something like:</p>
  
  <pre><code> $this.before('&lt;/ul&gt;&lt;/li&gt;&lt;li class="first-character"&gt;&lt;span&gt;'+firstCharacter+'&lt;/span&gt;&lt;ul&gt;');
  </code></pre>
  
  <p>The Browser closes the  tag. Does anybody have an idea?</p>
  
  <p>I want the following output:</p>
  
  <pre><code>7     E      K      S     W
  List  List   List   List  List
  A     F      L      T     X
  List  List   List   List  List
  </code></pre>