title: Sort divs based on array order and add a title and count
body: <p>I have html that looks like the following:</p>
  
  <pre><code>&lt;div id="mainboard"&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;20&lt;/div&gt;&lt;div class="style"&gt;blue&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;23&lt;/div&gt;&lt;div class="style"&gt;red&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;10&lt;/div&gt;&lt;div class="style"&gt;red&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;29&lt;/div&gt;&lt;div class="style"&gt;green&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;35&lt;/div&gt;&lt;div class="style"&gt;blue&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what I currently have:</p>
  
  <pre><code>function SortDivs(parent, childSelector, keySelector) {
      var colorOrder = ['red', 'blue', 'green'];
  
      var items = parent.children(childSelector).sort(function(a, b) {
          var vA = $(keySelector, a).text();
          var vB = $(keySelector, b).text();
  
          console.log(vA+', '+vB);
  
          return (vA &lt; vB) ? -1 : (vA &gt; vB) ? 1 : 0;
      });
      parent.append(items);
  }
  </code></pre>
  
  <p>If I do this:</p>
  
  <pre><code>SortDivs($('#mainboard'), 'div', 'div.style');
  </code></pre>
  
  <p>I get:</p>
  
  <pre><code>&lt;div id="mainboard"&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;20&lt;/div&gt;&lt;div class="style"&gt;blue&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;35&lt;/div&gt;&lt;div class="style"&gt;blue&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;29&lt;/div&gt;&lt;div class="style"&gt;green&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;23&lt;/div&gt;&lt;div class="style"&gt;red&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;10&lt;/div&gt;&lt;div class="style"&gt;red&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I make it so the results look like this:
  (Note the custom color order and it counts the rows per category.)</p>
  
  <pre><code>&lt;div id="mainboard"&gt;
      &lt;div id="title"&gt;Red (2)&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;23&lt;/div&gt;&lt;div class="style"&gt;red&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;10&lt;/div&gt;&lt;div class="style"&gt;red&lt;/div&gt;&lt;/div&gt;
      &lt;div id="title"&gt;Blue (2)&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;20&lt;/div&gt;&lt;div class="style"&gt;blue&lt;/div&gt;&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;35&lt;/div&gt;&lt;div class="style"&gt;blue&lt;/div&gt;&lt;/div&gt;
      &lt;div id="title"&gt;Green (1)&lt;/div&gt;
      &lt;div id="card"&gt;&lt;div class="price"&gt;29&lt;/div&gt;&lt;div class="style"&gt;green&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>