title: jquery .each() combing all values on each run through
body: <p>My objective is to group elements on the page based on a dataset of their location. The content is already being rendered onto the page, and I want a Location header for each unique location above the events being held there. The structure of the page would be Class Name > Location > class times</p>
  
  <p>I'm doing a few .each() loops to try to find what I need, but the values of what I think should be separate runs of the first each loop are all being combined together. The thing is, the each loop is still running multiple times.</p>
  
  <pre><code>$('.class-Info').each(function () 
  {
      var className = $("h2").text();
      var eventLocations = [];
      $('.scheduledClass').each(function (index) 
      {
          eventLocations[index] = $(this).data("location");
      }); 
  
      var key = "";
      var uniqueLocations = [];
      $(eventLocations).each(function (index, location)
      {
          if (key !== eventLocations[index])
          {
              key = eventLocations[index];
              uniqueLocations.push(eventLocations[index]);
          }
       });
  
       console.log ("For " + className + " the locations are " + uniqueLocations);
  
  });
  </code></pre>
  
  <p>Here is my code. I hope my question makes sense. Take a look at the console to see the results I'm getting.</p>
  
  <p><a href="http://jsfiddle.net/qnpr9fbh/5/" rel="nofollow">http://jsfiddle.net/qnpr9fbh/5/</a></p>