JQuery Order list by field and add to divider div
<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>
