title: Star rating system : Works on only one instance
body: <p>I used a code for a star rating system using few bits from some sources online. The system works fine but I'm facing one issue. If there are more than one star rating instances in a page , when I click on a rating , the previous rating I set resets. It's like the CSS works only for one rating instance at a time. I want to rate multiple items but it lets me rate only one.</p>
  
  <p>Here's the css:</p>
  
  <pre><code>.starRating{
    display        : inline-block;
    position       : relative;
    height         : 24px;
    background     : url('../images/stars.png') repeat-x 0 0;
    vertical-align : bottom;
  }
  
  .starRating div{
    float    : left;
    position : relative;
    height   : 24px;
  }
  
  .starRating input{
    position : relative;
    z-index  : 1;
    width    : 24px;
    height   : 24px;
    margin   : 0;
    padding  : 0;
    opacity  : 0;
  }
  
  .starRating label{
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 24px;
  }
  
  .starRating span{
    display : none;
  }
  
  .starRating       input:checked       + label,
  .starRating:hover input:checked:hover + label{
    background : url('../images/stars.png') repeat-x 0 -24px;
  }
  
  .starRating:hover input:checked + label{
    background : transparent;
  }
  
  .starRating:hover input:hover + label{
    background : url('../images/stars.png') repeat-x 0 -48px;
  }
  </code></pre>
  
  <p>And the html :</p>
  
  <pre><code>&lt;div class="starRating"&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;input id="rating1" type="radio" name="rating" value="1"&gt;
            &lt;label for="rating1"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;input id="rating2" type="radio" name="rating" value="2"&gt;
          &lt;label for="rating2"&gt;&lt;span&gt;2&lt;/span&gt;&lt;/label&gt;
        &lt;/div&gt;
        &lt;input id="rating3" type="radio" name="rating" value="3"&gt;
        &lt;label for="rating3"&gt;&lt;span&gt;3&lt;/span&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;input id="rating4" type="radio" name="rating" value="4"&gt;
      &lt;label for="rating4"&gt;&lt;span&gt;4&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;input id="rating5" type="radio" name="rating" value="5"&gt;
    &lt;label for="rating5"&gt;&lt;span&gt;5&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>