title: Add multiple star rating in the same page
body: <p>I,m trying to add a star rating functionality to my page in mvc , but when i tried to loop over them in the view i got the problem which is all of stars are attached to the first on which mean when i change the second one the first one changes , i got the code from internet 
  can any one help </p>
  
  <pre><code>fieldset, label { margin: 0; padding: 0; }
  body{ margin: 20px; }
  h1 { font-size: 1.5em; margin: 10px; }
  
  /****** Style Star Rating Widget *****/
  
  .rating { 
   border: none;
   float: left;
    }
  
  .rating &gt; input { display: none; } 
  .rating &gt; label:before { 
   margin: 5px;
   font-size: 1.25em;
   font-family: FontAwesome;
   display: inline-block;
   content: "\f005";
    }
  
   .rating &gt; .half:before { 
    content: "\f089";
    position: absolute;
     }
  
     .rating &gt; label { 
      color: #ddd; 
      float: right; 
       }
  
       /***** CSS Magic to Highlight Stars on Hover *****/
  
      .rating &gt; input:checked ~ label, /* show gold star when clicked */
       .rating:not(:checked) &gt; label:hover, /* hover current star */
        .rating:not(:checked) &gt; label:hover ~ label { color: #FFD700;  } 
         /*        hover previous stars in list */
  
         .rating &gt; input:checked + label:hover,
         .rating &gt; input:checked ~ label:hover,
         .rating &gt; label:hover ~ input:checked ~ label, 
         .rating &gt; input:checked ~ label:hover ~ label { color: #FFED85;  }
  </code></pre>
  
  <p>HTML : </p>
  
  <pre><code>  &lt;h1&gt;Pure CSS Star Rating Widget&lt;/h1&gt;
  &lt;fieldset class="rating"&gt;
      &lt;input type="radio" id="star5" name="rating" value="5" /&gt;&lt;label class = "full" for="star5" title="Awesome - 5 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star4half" name="rating" value="4 and a half" /&gt;&lt;label class="half" for="star4half" title="Pretty good - 4.5 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star4" name="rating" value="4" /&gt;&lt;label class = "full" for="star4" title="Pretty good - 4 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star3half" name="rating" value="3 and a half" /&gt;&lt;label class="half" for="star3half" title="Meh - 3.5 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star3" name="rating" value="3" /&gt;&lt;label class = "full" for="star3" title="Meh - 3 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star2half" name="rating" value="2 and a half" /&gt;&lt;label class="half" for="star2half" title="Kinda bad - 2.5 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star2" name="rating" value="2" /&gt;&lt;label class = "full" for="star2" title="Kinda bad - 2 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star1half" name="rating" value="1 and a half" /&gt;&lt;label class="half" for="star1half" title="Meh - 1.5 stars"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star1" name="rating" value="1" /&gt;&lt;label class = "full" for="star1" title="Sucks big time - 1 star"&gt;&lt;/label&gt;
      &lt;input type="radio" id="starhalf" name="rating" value="half" /&gt;&lt;label class="half" for="starhalf" title="Sucks big time - 0.5 stars"&gt;&lt;/label&gt;
  &lt;/fieldset&gt;
  </code></pre>