Multiple Star Review on Same Page - php

Question

I have a multi-page form and on one of the pages I have a star-review application, whereby users can vote between 1 and 5 stars. I have it working great, however on the same page I need this multiple times (i.e. different things to review).
I have tried a number of things; changing the class of 'stars' and 'star', but neither allows multiple ratings - they all trigger back to the first one (i.e. if you select 2 star on the second it also defaults the first selection to 2 star, or only selects the first selection to 2 star). Any ideas?
HTML code:
<div class="stars">
<input type="radio" name="star" class="star-1" id="star-1" />
<label class="star-1" for="star-1">1</label>
<input type="radio" name="star" class="star-2" id="star-2" />
<label class="star-2" for="star-2">2</label>
<input type="radio" name="star" class="star-3" id="star-3" />
<label class="star-3" for="star-3">3</label>
<input type="radio" name="star" class="star-4" id="star-4" />
<label class="star-4" for="star-4">4</label>
<input type="radio" name="star" class="star-5" id="star-5" />
<label class="star-5" for="star-5">5</label>
<span></span>
</div>
CSS:
form .stars {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
form .stars input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
width: 20%;
}
form .stars label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
form .stars label:hover ~ span {
background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
width: 100% !important;
}
form .stars label.star-4:hover ~ span {
width: 80% !important;
}
form .stars label.star-3:hover ~ span {
width: 60% !important;
}
form .stars label.star-2:hover ~ span {
width: 40% !important;
}
form .stars label.star-1:hover ~ span {
width: 20% !important;
}
form .stars span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}

Answer 1

I got it working by changing the radio name and keeping IDs unique.
Radio buttons are grouped by name so that each represents a value for a particular form "variable". With each set of stars representing a different variable, a product's rating, each group should have a separate name reflecting which product they're for e.g. appending the product id, name="star-123456". You could also append the index of the product in the list of items for the form.
IDs should always be unique among elements. In this case the radio input ids should be unique for the labels' for attribute to point to the right one.
The snippet below contains unique names for the two radio groups and unique IDs for each radio input.
form .stars {
background: gray;
width: 150px;
margin: 0 auto;
}
form .stars input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
width: 20%;
}
form .stars label {
display: block;
width: 28px;
height: 28px;
border: 1px solid black;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
form .stars label:hover ~ span {
background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
width: 100% !important;
}
form .stars label.star-4:hover ~ span {
width: 80% !important;
}
form .stars label.star-3:hover ~ span {
width: 60% !important;
}
form .stars label.star-2:hover ~ span {
width: 40% !important;
}
form .stars label.star-1:hover ~ span {
width: 20% !important;
}
form .stars span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: red;
filter: alpha(opacity=0);
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
<form>
<div class="stars">
<input type="radio" name="star_a" class="star-1" id="star_a-1" />
<label class="star-1" for="star_a-1">1</label>
<input type="radio" name="star_a" class="star-2" id="star_a-2" />
<label class="star-2" for="star_a-2">2</label>
<input type="radio" name="star_a" class="star-3" id="star_a-3" />
<label class="star-3" for="star_a-3">3</label>
<input type="radio" name="star_a" class="star-4" id="star_a-4" />
<label class="star-4" for="star_a-4">4</label>
<input type="radio" name="star_a" class="star-5" id="star_a-5" />
<label class="star-5" for="star_a-5">5</label>
<span></span>
</div>
<div class="stars">
<input type="radio" name="star_b" class="star-1" id="star_b-1" />
<label class="star-1" for="star_b-1">1</label>
<input type="radio" name="star_b" class="star-2" id="star_b-2" />
<label class="star-2" for="star_b-2">2</label>
<input type="radio" name="star_b" class="star-3" id="star_b-3" />
<label class="star-3" for="star_b-3">3</label>
<input type="radio" name="star_b" class="star-4" id="star_b-4" />
<label class="star-4" for="star_b-4">4</label>
<input type="radio" name="star_b" class="star-5" id="star_b-5" />
<label class="star-5" for="star_b-5">5</label>
<span></span>
</div>
</form>