jQuery to group a list alphabetically
<p>I have a list like this:</p>

<pre><code>&lt;ul id="recipes"&gt;
&lt;li&gt;&lt;a href='xxx'&gt;Apple Pie&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='xxx'&gt;Almond Slice&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='xxx'&gt;Banana Cake&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='xxx'&gt;Carrot Cake&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>That I need to convert to a list grouped alphabetically like this:</p>

<pre><code>&lt;h3&gt;A&lt;h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='xxx'&gt;Apple Pie&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='xxx'&gt;Almond Slice&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;B&lt;h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='xxx'&gt;Banana Cake&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;C&lt;h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=''xxx'&gt;Carrot Cake&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I've sorted the list with jQuery, but can't quite figure out how to achieve the grouping I need, can anyone help?</p>

<p>EDIT: I can add more info to my original list, so it looks like this:</p>

<pre><code>&lt;ul id="recipes"&gt;
&lt;li class='a'&gt;&lt;a href='xxx'&gt;Apple Pie&lt;/a&gt;&lt;/li&gt;
&lt;li class='a'&gt;&lt;a href='xxx'&gt;Almond Slice&lt;/a&gt;&lt;/li&gt;
&lt;li class='b'&gt;&lt;a href='xxx'&gt;Banana Cake&lt;/a&gt;&lt;/li&gt;
&lt;li class='c'&gt;&lt;a href='xxx'&gt;Carrot Cake&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I suspect that will help a lot</p>
