title: jQuery manage multiple star rating
body: <p>On my website I have a page with serval results where people can bring out there rating.</p>
  
  <p>With one rating list on the page everything works fine but with multiple I got a little problem by selecting the right list (this) to be hovered. Right now it's always the first list in the html code which is hovered (if I put my cursor on the second rating list first is hovering).</p>
  
  <p>The html:</p>
  
  <pre><code>&lt;ol class="rating" data-rating="4"&gt;
  &lt;li class="Arad5fQEnoZlv9E59d"&gt;&lt;a title="Super boring" class="rate starOn" id="1"&gt;1 star&lt;/a&gt;&lt;/li&gt;
  &lt;li class="Arad5fQEnoZlv9E59d"&gt;&lt;a title="Boring" class="rate starOn" id="2"&gt;2 stars&lt;/a&gt;&lt;/li&gt;
  &lt;li class="Arad5fQEnoZlv9E59d"&gt;&lt;a title="Nice" class="rate starOn" id="3"&gt;3 stars&lt;/a&gt;&lt;/li&gt;
  &lt;li class="Arad5fQEnoZlv9E59d"&gt;&lt;a title="Cool" class="rate starOn" id="4"&gt;4 stars&lt;/a&gt;&lt;/li&gt;
  &lt;li class="Arad5fQEnoZlv9E59d"&gt;&lt;a title="Super cool!" class="rate star" id="5"&gt;5 stars&lt;/a&gt;&lt;/li&gt;
  &lt;div class="response"&gt;Score 4 By 2  ratings&lt;/div&gt;
  &lt;/ol&gt; 
  </code></pre>
  
  <p>The part of my javascript who won't do the good job:</p>
  
  <pre><code>$('ol.rating li', this).hover(function(){
              var id      = $('a', this).attr('id');
              var counter = 1;
              var salt    = $(this).attr('class');
  
              console.log('ol.rating li.'+salt);
  
              $('ol.rating li.'+salt).each(function(i){
              if (id &gt;= counter) {
                  $('a#'+counter).addClass("starHover");
              } else {
                  $('a#'+counter).removeClass("starHover");
              }
              counter++;
              });
      });
  </code></pre>
  
  <p>Hope my question is a bit clear :)</p>
  
  <p>Thanks in advance!
  Nick</p>