title: JQuery Order list by field and add to divider div
body: <p>I am trying to get listing organized by a field called letter.</p>
  
  <p>So the fields are:</p>
  
  <p>id, name, letter.</p>
  
  <p>for example:</p>
  
  <h2>id   name   letter</h2>
  
  <p>1    list1  a
  2    list2  a
  3    list3  b</p>
  
  <p>To list1 and list2 are added after id="a" and list3 is added after id="b"</p>
  
  <p>Here is a json data sample:</p>
  
  <pre><code>{"id":[{"id":"1","name":"list1","letter":"a"},{"id":"2","name":"list2","letter":"b"}]}
  </code></pre>
  
  <p>The code below adds the contents to the listview but I need to go a step further and add then to their own place.</p>
  
  <p>For example all listings with the letter "a" are added after the A</li> etc</p>
  
  <p>Here is the code: </p>
  
  <pre><code>$.getJSON("list.json", function(data){
      var output = '';
  
      $.each(data.id, function(index, value){
  
          output += '&lt;li&gt;&lt;h1&gt;' + value.name + '&lt;/h1&gt;&lt;/li&gt;';
  
      });
  
  
      $('#listview').html(output).listview('refresh');
  
      }).error(function(args) {
  console.log(args);
  
  });
  
  &lt;ul id="listview"&gt;
  &lt;li id="a"&gt;A&lt;/li&gt;
  &lt;!--Listings with letter A go here--&gt;
  &lt;li id="b"&gt;B&lt;/li&gt;
  &lt;!--Listings with letter B go here--&gt;
  &lt;li id="c"&gt;C&lt;/li&gt;
  &lt;!--Listings with letter C go here--&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How can I get the listings for be added to its place?</p>