Stars (radio button) won't change colour when selected - html

Question

I have two star rating systems using radio buttons. When the user clicks the star, that star and all the stars behind it are supposed to turn yellow. You can see this in the comments in my CSS code (such as /* show gold star when clicked */).
I believe it has something to do with with the ::before element which appears maybe? But I'm not totally sure on this:
.rating {
border: none;
float: left;
}
.rating {
margin: 0;
padding: 0;
}
.rating input {
display: none;
}
.rating label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating .half:before {
content: "\f089";
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: #FFD700;
}
/* 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: #FFED85;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<fieldset class="rating">
<label class="full" title="Excellent">
<input type="radio" name="rating" value="5" />
</label>
<label class="half" title="Good">
<input type="radio" name="rating" value="4.5" />
</label>
<label class="full" title="Pretty Good">
<input type="radio" name="rating" value="4" />
</label>
<label class="half" title="Nice">
<input type="radio" name="rating" value="3.5" />
</label>
<label class="full" title="Ok">
<input type="radio" name="rating" value="3" />
</label>
<label class="half" title="Kinda Bad">
<input type="radio" name="rating" value="2.5" />
</label>
<label class="full" title="Bad">
<input type="radio" name="rating" value="2" />
</label>
<label class="half" title="Meh">
<input type="radio" name="rating" value="1.5" />
</label>
<label class="full" title="Umm">
<input type="radio" name="rating" value="1" />
</label>
<label class="half" title="Worst">
<input type="radio" name="rating" value="0.5" />
</label>
</fieldset>
<br><br>
<fieldset class="rating">
<label class="full" title="Excellent">
<input type="radio" name="rating" value="5" />
</label>
<label class="half" title="Good">
<input type="radio" name="rating" value="4.5" />
</label>
<label class="full" title="Pretty Good">
<input type="radio" name="rating" value="4" />
</label>
<label class="half" title="Nice">
<input type="radio" name="rating" value="3.5" />
</label>
<label class="full" title="Ok">
<input type="radio" name="rating" value="3" />
</label>
<label class="half" title="Kinda Bad">
<input type="radio" name="rating" value="2.5" />
</label>
<label class="full" title="Bad">
<input type="radio" name="rating" value="2" />
</label>
<label class="half" title="Meh">
<input type="radio" name="rating" value="1.5" />
</label>
<label class="full" title="Umm">
<input type="radio" name="rating" value="1" />
</label>
<label class="half" title="Worst">
<input type="radio" name="rating" value="0.5" />
</label>
</fieldset>

Answer 1

As mentioned above, this is achievable in pure CSS, but it does require adding IDs and for attributes and restructuring the HTML a little to make the labels and radio buttons siblings, like so:
$(document).on('click', 'fieldset label', function () {
var that = this;
setTimeout(function() {
console.log('hidden val=',$(that).parent().find("input[type='hidden']").val());
console.log('checked val=',$(that).parent().find("input[type='radio']:checked").val());
},1);
});
.rating {
border: none;
float: left;
}
.rating {
margin: 0;
padding: 0;
}
.rating input {
display: none;
}
.rating label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating .half:before {
content: "\f089";
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: #FFD700;
}
/* 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: #FFED85;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<fieldset class="rating">
<input type="hidden" value="1">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
<br><br>
<fieldset class="rating">
<input type="hidden" value="2">
<input type="radio" id="5star2" name="rating2" value="5" />
<label class="full" for="5star2" title="Excellent"></label>
<input type="radio" id="4halfstar2" name="rating2" value="4.5" />
<label class="half" for="4halfstar2" title="Good"></label>
<input type="radio" id="4star2" name="rating2" value="4" />
<label class="full" for="4star2" title="Pretty good"></label>
<input type="radio" id="3halfstar2" name="rating2" value="3.5" />
<label class="half" for="3halfstar2" title="Nice"></label>
<input type="radio" id="3star2" name="rating2" value="3" />
<label class="full" for="3star2" title="Ok"></label>
<input type="radio" id="2halfstar2" name="rating2" value="2.5" />
<label class="half" for="2halfstar2" title="Kinda bad"></label>
<input type="radio" id="2star2" name="rating2" value="2" />
<label class="full" for="2star2" title="Bad"></label>
<input type="radio" id="1halfstar2" name="rating2" value="1.5" />
<label class="half" for="1halfstar2" title="Meh"></label>
<input type="radio" id="1star2" name="rating2" value="1" />
<label class="full" for="1star2" title="Umm"></label>
<input type="radio" id="halfstar2" name="rating2" value="0.5" />
<label class="half" for="halfstar2" title="Worst"></label>
</fieldset>