title: Count values of data-attribute with jQuery
body: <p>I have list like this.</p>
  
  <pre><code>&lt;li data-pet="cat"&gt;&lt;/li&gt;
  &lt;li data-pet="cat"&gt;&lt;/li&gt;
  &lt;li data-pet="cat"&gt;&lt;/li&gt;
  &lt;li data-pet="dog"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Using jQuery how can I grab the value of the data-attributes to count if the same value appears more than once. </p>
  
  <p>I then want to append a span to first list element with that value.</p>
  
  <p>Result should look like this.</p>
  
  <pre><code>&lt;li data-pet="cat"&gt;&lt;span class="first"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li data-pet="cat"&gt;&lt;/li&gt;
  &lt;li data-pet="cat"&gt;&lt;/li&gt;
  &lt;li data-pet="dog"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Thanks for your help.</p>