How to make 5-star rating with CSS

Question

I've edited a version of CSS 5-star rating, and need multiple of these ratings on my one page. However, when I changed the id on the different sets of 5 stars, and now it won't process checking the stars.

I tried to have multiple sets of 5 stars, and edited IDs to do so, expecting it to work, but the stars would not receive checked value when checked.

fieldset,
label {
  margin: 0;
  padding: 0;
}

body {
  margin: 20px;
}

h1 {
  font-size: 1.5em;
  margin: 10px;
}

.rating {
  border: none;
  float: left;
}

.rating>input {
  display: none;
}

.rating>label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "★";
}

.rating>.half:before {
  content: "★";
  position: absolute;
}

.rating>label {
  color: #ddd;
  float: right;
}

.rating>input:checked~label,

/* show gold star when clicked */

.rating:not(:checked)>label:hover,

/* hover current star */

.rating:not(:checked)>label:hover~label {
  color: #ff0000;
}


/* hover previous stars in list */

.rating>input:checked+label:hover,

/* hover current star when changing rating */

.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,

/* lighten current selection */

.rating>input:checked~label:hover~label {
  color: #ff8080;
}

<fieldset class="rating">
  <input type="radio" id="1star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
  <input type="radio" id="1star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
  <input type="radio" id="1star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
  <input type="radio" id="1star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
  <input type="radio" id="1star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
  <input type="radio" id="1star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
  <input type="radio" id="1star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
  <input type="radio" id="1star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
  <input type="radio" id="1star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
  <input type="radio" id="1starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>

  <fieldset class="rating">
    <input type="radio" id="2star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="2star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="2star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="2star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="2star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="2star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="2star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="2star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="2star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="2starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>

Answer 1

The issue you are having is with the HTML. Inputs have unique IDs but the for attribute in for each label must be the same as the IDof the input it refers to (see the label element on MDN).
Like this :

fieldset,
label {
  margin: 0;
  padding: 0;
}

body {
  margin: 20px;
}

h1 {
  font-size: 1.5em;
  margin: 10px;
}

.rating {
  border: none;
  float: left;
}

.rating>input {
  display: none;
}

.rating>label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "★";
}

.rating>.half:before {
  content: "★";
  position: absolute;
}

.rating>label {
  color: #ddd;
  float: right;
}

.rating>input:checked~label,

/* show gold star when clicked */

.rating:not(:checked)>label:hover,

/* hover current star */

.rating:not(:checked)>label:hover~label {
  color: #ff0000;
}


/* hover previous stars in list */

.rating>input:checked+label:hover,

/* hover current star when changing rating */

.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,

/* lighten current selection */

.rating>input:checked~label:hover~label {
  color: #ff8080;
}

<fieldset class="rating">
  <input type="radio" id="1star5" name="rating" value="5" />
  <label class="full" for="1star5" title="Awesome - 5 stars"></label>
  <input type="radio" id="1star4half" name="rating" value="4 and a half" />
  <label class="half" for="1star4half" title="Pretty good - 4.5 stars"></label>
  <input type="radio" id="1star4" name="rating" value="4" />
  <label class="full" for="1star4" title="Pretty good - 4 stars"></label>
  <input type="radio" id="1star3half" name="rating" value="3 and a half" />
  <label class="half" for="1star3half" title="Meh - 3.5 stars"></label>
  <input type="radio" id="1star3" name="rating" value="3" />
  <label class="full" for="1star3" title="Meh - 3 stars"></label>
  <input type="radio" id="1star2half" name="rating" value="2 and a half" />
  <label class="half" for="1star2half" title="Kinda bad - 2.5 stars"></label>
  <input type="radio" id="1star2" name="rating" value="2" />
  <label class="full" for="1star2" title="Kinda bad - 2 stars"></label>
  <input type="radio" id="1star1half" name="rating" value="1 and a half" />
  <label class="half" for="1star1half" title="Meh - 1.5 stars"></label>
  <input type="radio" id="1star1" name="rating" value="1" />
  <label class="full" for="1star1" title="Sucks big time - 1 star"></label>
  <input type="radio" id="1starhalf" name="rating" value="half" />
  <label class="half" for="1starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

<fieldset class="rating">
  <input type="radio" id="2star5" name="rating" value="5" />
  <label class="full" for="2star5" title="Awesome - 5 stars"></label>
  <input type="radio" id="2star4half" name="rating" value="4 and a half" />
  <label class="half" for="2star4half" title="Pretty good - 4.5 stars"></label>
  <input type="radio" id="2star4" name="rating" value="4" />
  <label class="full" for="2star4" title="Pretty good - 4 stars"></label>
  <input type="radio" id="2star3half" name="rating" value="3 and a half" />
  <label class="half" for="2star3half" title="Meh - 3.5 stars"></label>
  <input type="radio" id="2star3" name="rating" value="3" />
  <label class="full" for="2star3" title="Meh - 3 stars"></label>
  <input type="radio" id="2star2half" name="rating" value="2 and a half" />
  <label class="half" for="2star2half" title="Kinda bad - 2.5 stars"></label>
  <input type="radio" id="2star2" name="rating" value="2" />
  <label class="full" for="2star2" title="Kinda bad - 2 stars"></label>
  <input type="radio" id="2star1half" name="rating" value="1 and a half" />
  <label class="half" for="2star1half" title="Meh - 1.5 stars"></label>
  <input type="radio" id="2star1" name="rating" value="1" />
  <label class="full" for="2star1" title="Sucks big time - 1 star"></label>
  <input type="radio" id="2starhalf" name="rating" value="half" />
  <label class="half" for="2starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

Note that you also didn't close the <fieldset> tags.