Generated by SassMeister.com.

SassMeister-input-HTML.haml

%ul.rating
  - (1..5).each do |i|
    %li(class="star-#{i}")
      %input(type="radio" id="rating-star-#{i}" name="rating" value="#{i}")
      %label(for="rating-star-#{i}") #{i} stars      

%ul.rating2
  - (1..8).each do |i|
    %li(class="star-#{i}")
      %input(type="radio" id="rating2-star-#{i}" name="rating-2" value="#{i}")
      %label(for="rating2-star-#{i}") #{i} stars

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

// From scut
@mixin hide-visually {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// Mixin that sets container dimensions, etc:
@mixin rating-container($star-count, $star-size, $star-spacing) {
  // Calculate container width:
  $container-width: $star-count * $star-size + (($star-count - 1) * $star-spacing);
  
  width: $container-width;
  height: $star-size;
  position: relative;
  // Include mixin that sets the background for 0 yellow stars:
  @include rating-background(0, $star-count, $star-size, $star-spacing);
  
  // CSS to reset some browser defaults:
  &, li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
  }
  
  li {
    height: $star-size;
    position: absolute;
  }
  
  label {
    width: 100%;
    height: $star-size;
    display: block;
    cursor: pointer;
  }
  
  input[type="radio"] {
    @include hide-visually;
  }
  
  // Set dimenions & z-index of each star element:
  @for $i from 1 through $star-count {
    .star-#{$i} {
      width: $i * $star-size + (($i - 1) * $star-spacing);
      z-index: ($star-count + 1) - $i;
      
      input[type="radio"]:checked + label {
        @include rating-background($i, $star-count, $star-size, $star-spacing, true);
      }

      // Add hover state:
      label:hover {
        @include rating-background($i, $star-count, $star-size, $star-spacing);
      }
    }
  }
}

// Mixin that sets background image based on number of stars:
@mixin rating-background($stars-on, $star-count, $star-size, $star-spacing, $selected: false) {
  $current-star: 0; // Current iteration
  $stars: (); // Comma separated list to store bg
  
  // Go from 1 through number of stars:
  @for $i from 1 through $star-count {
    // Calculate background position:
    $background-position: #{$current-star * $star-size + $current-star * $star-spacing} 0;
    $on: if($selected, "selected", "on" );
    // Set star to "on" if its number is <= $stars-on:
    $star-state: if($i <= $stars-on, $on, "off");
    // Append to the list (comma separated):
    $stars: append($stars, url("http://mattvanderpol.com/images/star_#{$star-state}.png") #{$background-position} / #{$star-size} no-repeat, comma);
    // Increase current iteration counter:
    $current-star: $current-star + 1;
  }

  // Output the background image:
  background: $stars;
}

// Use this to add a rating element (plus corresponding HTML):
.rating {
  @include rating-container(
    $star-count: 5,
    $star-size: 40px,
    $star-spacing: 10px
  );
}

.rating2 {
  @include rating-container(
    $star-count: 8,
    $star-size: 60px,
    $star-spacing: 10px
  );
}

SassMeister-output.css

.rating {
  width: 240px;
  height: 40px;
  position: relative;
  background: url("http://mattvanderpol.com/images/star_off.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating, .rating li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
}
.rating li {
  height: 40px;
  position: absolute;
}
.rating label {
  width: 100%;
  height: 40px;
  display: block;
  cursor: pointer;
}
.rating input[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.rating .star-1 {
  width: 40px;
  z-index: 5;
}
.rating .star-1 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating .star-1 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating .star-2 {
  width: 90px;
  z-index: 4;
}
.rating .star-2 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating .star-2 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating .star-3 {
  width: 140px;
  z-index: 3;
}
.rating .star-3 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating .star-3 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating .star-4 {
  width: 190px;
  z-index: 2;
}
.rating .star-4 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating .star-4 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 200px 0 / 40px no-repeat;
}
.rating .star-5 {
  width: 240px;
  z-index: 1;
}
.rating .star-5 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 200px 0 / 40px no-repeat;
}
.rating .star-5 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 50px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 100px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 150px 0 / 40px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 200px 0 / 40px no-repeat;
}

.rating2 {
  width: 550px;
  height: 60px;
  position: relative;
  background: url("http://mattvanderpol.com/images/star_off.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2, .rating2 li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
}
.rating2 li {
  height: 60px;
  position: absolute;
}
.rating2 label {
  width: 100%;
  height: 60px;
  display: block;
  cursor: pointer;
}
.rating2 input[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.rating2 .star-1 {
  width: 60px;
  z-index: 8;
}
.rating2 .star-1 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-1 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-2 {
  width: 130px;
  z-index: 7;
}
.rating2 .star-2 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-2 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-3 {
  width: 200px;
  z-index: 6;
}
.rating2 .star-3 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-3 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-4 {
  width: 270px;
  z-index: 5;
}
.rating2 .star-4 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-4 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-5 {
  width: 340px;
  z-index: 4;
}
.rating2 .star-5 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-5 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-6 {
  width: 410px;
  z-index: 3;
}
.rating2 .star-6 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-6 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-7 {
  width: 480px;
  z-index: 2;
}
.rating2 .star-7 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-7 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_off.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-8 {
  width: 550px;
  z-index: 1;
}
.rating2 .star-8 input[type="radio"]:checked + label {
  background: url("http://mattvanderpol.com/images/star_selected.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_selected.png") 490px 0 / 60px no-repeat;
}
.rating2 .star-8 label:hover {
  background: url("http://mattvanderpol.com/images/star_on.png") 0px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 70px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 140px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 210px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 280px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 350px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 420px 0 / 60px no-repeat, url("http://mattvanderpol.com/images/star_on.png") 490px 0 / 60px no-repeat;
}

SassMeister-rendered.html

<ul class='rating'>
  <li class='star-1'>
    <input id='rating-star-1' name='rating' type='radio' value='1'>
    <label for='rating-star-1'>1 stars</label>
  </li>
  <li class='star-2'>
    <input id='rating-star-2' name='rating' type='radio' value='2'>
    <label for='rating-star-2'>2 stars</label>
  </li>
  <li class='star-3'>
    <input id='rating-star-3' name='rating' type='radio' value='3'>
    <label for='rating-star-3'>3 stars</label>
  </li>
  <li class='star-4'>
    <input id='rating-star-4' name='rating' type='radio' value='4'>
    <label for='rating-star-4'>4 stars</label>
  </li>
  <li class='star-5'>
    <input id='rating-star-5' name='rating' type='radio' value='5'>
    <label for='rating-star-5'>5 stars</label>
  </li>
</ul>
<ul class='rating2'>
  <li class='star-1'>
    <input id='rating2-star-1' name='rating-2' type='radio' value='1'>
    <label for='rating2-star-1'>1 stars</label>
  </li>
  <li class='star-2'>
    <input id='rating2-star-2' name='rating-2' type='radio' value='2'>
    <label for='rating2-star-2'>2 stars</label>
  </li>
  <li class='star-3'>
    <input id='rating2-star-3' name='rating-2' type='radio' value='3'>
    <label for='rating2-star-3'>3 stars</label>
  </li>
  <li class='star-4'>
    <input id='rating2-star-4' name='rating-2' type='radio' value='4'>
    <label for='rating2-star-4'>4 stars</label>
  </li>
  <li class='star-5'>
    <input id='rating2-star-5' name='rating-2' type='radio' value='5'>
    <label for='rating2-star-5'>5 stars</label>
  </li>
  <li class='star-6'>
    <input id='rating2-star-6' name='rating-2' type='radio' value='6'>
    <label for='rating2-star-6'>6 stars</label>
  </li>
  <li class='star-7'>
    <input id='rating2-star-7' name='rating-2' type='radio' value='7'>
    <label for='rating2-star-7'>7 stars</label>
  </li>
  <li class='star-8'>
    <input id='rating2-star-8' name='rating-2' type='radio' value='8'>
    <label for='rating2-star-8'>8 stars</label>
  </li>
</ul>