title: Alphabetically Order HTML List with Headers
body: <p>I am looking to Alphabetically order an HTML list, but after each letter, there would be a <code>&lt;hr /&gt;</code> tag and a header, indicating the new letter list.</p>
  
  <p>To revise if I wasn't clear enough, I have my list...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#/"&gt; john-smith/&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#/"&gt; joe-smith/&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#/"&gt; glen-smith/&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#/"&gt; daniel-smith/&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#/"&gt; johnny-smith/&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And now, I wanted to have some JS code that would organise this list alphabetically, as well as give a header &amp; line for each new letter; thus it would give an outcome somewhat similar to: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;hr /&gt;
    &lt;h3&gt;D&lt;/h3&gt;
    &lt;li&gt;&lt;a href="#/"&gt; daniel-smith/&lt;/a&gt;&lt;/li&gt;
    &lt;hr /&gt;
    &lt;h3&gt;G&lt;/h3&gt;
    &lt;li&gt;&lt;a href="#/"&gt; glen-smith/&lt;/a&gt;&lt;/li&gt;
    &lt;hr /&gt;
    &lt;h3&gt;J&lt;/h3&gt;
    &lt;li&gt;&lt;a href="#/"&gt; joe-smith/&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#/"&gt; johnny-smith/&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#/"&gt; joe-smith/&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I did try to do this myself, but I simply wasn't able to, I'm relatively new to JavaScript!
  Thanks.</p>