Multiple Star Review On Same Page

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

Solution 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.starsinput[type="radio"] {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}
form.starsinput[type="radio"].star-5:checked ~ span {
  width: 100%;
}
form.starsinput[type="radio"].star-4:checked ~ span {
  width: 80%;
}
form.starsinput[type="radio"].star-3:checked ~ span {
  width: 60%;
}
form.starsinput[type="radio"].star-2:checked ~ span {
  width: 40%;
}
form.starsinput[type="radio"].star-1:checked ~ span {
  width: 20%;
}
form.starslabel {
  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.starslabel:hover ~ span {
  background-position: 0 -30px;
}
form.starslabel.star-5:hover ~ span {
  width: 100%!important;
}
form.starslabel.star-4:hover ~ span {
  width: 80%!important;
}
form.starslabel.star-3:hover ~ span {
  width: 60%!important;
}
form.starslabel.star-2:hover ~ span {
  width: 40%!important;
}
form.starslabel.star-1:hover ~ span {
  width: 20%!important;
}
form.starsspan {
  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><divclass="stars"><inputtype="radio"name="star_a"class="star-1"id="star_a-1" /><labelclass="star-1"for="star_a-1">1</label><inputtype="radio"name="star_a"class="star-2"id="star_a-2" /><labelclass="star-2"for="star_a-2">2</label><inputtype="radio"name="star_a"class="star-3"id="star_a-3" /><labelclass="star-3"for="star_a-3">3</label><inputtype="radio"name="star_a"class="star-4"id="star_a-4" /><labelclass="star-4"for="star_a-4">4</label><inputtype="radio"name="star_a"class="star-5"id="star_a-5" /><labelclass="star-5"for="star_a-5">5</label><span></span></div><divclass="stars"><inputtype="radio"name="star_b"class="star-1"id="star_b-1" /><labelclass="star-1"for="star_b-1">1</label><inputtype="radio"name="star_b"class="star-2"id="star_b-2" /><labelclass="star-2"for="star_b-2">2</label><inputtype="radio"name="star_b"class="star-3"id="star_b-3" /><labelclass="star-3"for="star_b-3">3</label><inputtype="radio"name="star_b"class="star-4"id="star_b-4" /><labelclass="star-4"for="star_b-4">4</label><inputtype="radio"name="star_b"class="star-5"id="star_b-5" /><labelclass="star-5"for="star_b-5">5</label><span></span></div></form>