Star ranking ( numerous criteria) in css

Question

Here is a code of what I'm looking for :

http://jsfiddle.net/bumbu/rXWpy/5/light/

However, if I try to put the html code twice :

<div class="stars">
  <div class="rating" style="width:65%"></div>
  <input type="radio" name="rating" id="star5" value="5">
  <label for="star5"></label>
  <input type="radio" name="rating" id="star4" value="4">
  <label for="star4"></label>
  <input type="radio" name="rating" id="star3" value="3">
  <label for="star3"></label>
  <input type="radio" name="rating" id="star2" value="2">
  <label for="star2"></label>
  <input type="radio" name="rating" id="star1" value="1">
  <label for="star1"></label>
</div>
 <div class="stars">
  <div class="rating" style="width:35%"></div>
  <input type="radio" name="rating" id="star5" value="5">
  <label for="star5"></label>
  <input type="radio" name="rating" id="star4" value="4">
  <label for="star4"></label>
  <input type="radio" name="rating" id="star3" value="3">
  <label for="star3"></label>
  <input type="radio" name="rating" id="star2" value="2">
  <label for="star2"></label>
  <input type="radio" name="rating" id="star1" value="1">
  <label for="star1"></label>
</div>

Then, the two rows of stars are dependent. If I change one, the other will change too. How can I make them independent ?

Thank you to be indulgent, I'm beginning =)

Answer 1

You have to change the name and id of your radios. And the labels. Like this

<div class="stars">
    <div class="rating" style="width:65%"></div>
    <input type="radio" name="rating" id="star5" value="5">
    <label for="star5"></label>
    <input type="radio" name="rating" id="star4" value="4">
    <label for="star4"></label>
    <input type="radio" name="rating" id="star3" value="3">
    <label for="star3"></label>
    <input type="radio" name="rating" id="star2" value="2">
    <label for="star2"></label>
    <input type="radio" name="rating" id="star1" value="1">
    <label for="star1"></label>
</div>
<div class="stars">
    <div class="rating" style="width:65%"></div>
    <input type="radio" name="rating_2" id="star5_2" value="5">
    <label for="star5_2"></label>
    <input type="radio" name="rating_2" id="star4_2" value="4">
    <label for="star4_2"></label>
    <input type="radio" name="rating_2" id="star3_2" value="3">
    <label for="star3_2"></label>
    <input type="radio" name="rating_2" id="star2_2" value="2">
    <label for="star2_2"></label>
    <input type="radio" name="rating_2" id="star1_2" value="1">
    <label for="star1_2"></label>
</div>

Answer 2

Give the two groups a different name

They currently both have the name="rating"

Change the second group to something else, like name="rating2"