Onclick Event Runs Twice

I can't seem to work out why my onclick() event fires twice when the user clicks on a star. If the user clicks on the first star in the first set, it should output 1 and 0.5 to th

Solution 1:

Problem with you code is that clicking on label in a fieldset emits click event on the input. So you really have two clicks - first on label, second - on related input radio.

So, what you need to do is to track change event for radio instead tracking clicks on fieldset.

Update: And as Temani Afif mentioned in comments, as you have non-unique ids for inputs, clicking on radio in second fieldset still gets value of input[type='hidden'] in firstfieldset. So, you need to replace you labels ids too.

More: a better practice for labels is wraping input in it, so you have markup something like:

<labelclass="half"title="Good"><inputtype="radio"name="rating"value="4.5" /></label>

In this case you don't need id and for as label works with element which is inside it.

$(document).on('change', 'input[type="radio"]', function (e) {
    console.log(
        $(this).val(), 
        $(this).parent().find("input[type='hidden']").val()
    );
});

fieldset,
label {
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

.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: "\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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet"/><fieldsetclass="rating"><inputtype="hidden"value="1"><inputtype="radio"id="5star"name="rating"value="5" /><labelclass="full"for="5star"title="Excellent"></label><inputtype="radio"id="4halfstar"name="rating"value="4.5" /><labelclass="half"for="4halfstar"title="Good"></label><inputtype="radio"id="4star"name="rating"value="4" /><labelclass="full"for="4star"title="Pretty good"></label><inputtype="radio"id="3halfstar"name="rating"value="3.5" /><labelclass="half"for="3halfstar"title="Nice"></label><inputtype="radio"id="3star"name="rating"value="3" /><labelclass="full"for="3star"title="Ok"></label><inputtype="radio"id="2halfstar"name="rating"value="2.5" /><labelclass="half"for="2halfstar"title="Kinda bad"></label><inputtype="radio"id="2star"name="rating"value="2" /><labelclass="full"for="2star"title="Bad"></label><inputtype="radio"id="1halfstar"name="rating"value="1.5" /><labelclass="half"for="1halfstar"title="Meh"></label><inputtype="radio"id="1star"name="rating"value="1" /><labelclass="full"for="1star"title="Umm"></label><inputtype="radio"id="halfstar"name="rating"value="0.5" /><labelclass="half"for="halfstar"title="Worst"></label></fieldset><br><br><fieldsetclass="rating"><inputtype="hidden"value="2"><inputtype="radio"id="second-5star"name="rating"value="5" /><labelclass="full"for="second-5star"title="Excellent"></label><inputtype="radio"id="second-4halfstar"name="rating"value="4.5" /><labelclass="half"for="second-4halfstar"title="Good"></label><inputtype="radio"id="second-4star"name="rating"value="4" /><labelclass="full"for="second-4star"title="Pretty good"></label><inputtype="radio"id="second-3halfstar"name="rating"value="3.5" /><labelclass="half"for="second-3halfstar"title="Nice"></label><inputtype="radio"id="second-3star"name="rating"value="3" /><labelclass="full"for="second-3star"title="Ok"></label><inputtype="radio"id="second-2halfstar"name="rating"value="2.5" /><labelclass="half"for="second-2halfstar"title="Kinda bad"></label><inputtype="radio"id="second-2star"name="rating"value="2" /><labelclass="full"for="second-2star"title="Bad"></label><inputtype="radio"id="second-1halfstar"name="rating"value="1.5" /><labelclass="half"for="second-1halfstar"title="Meh"></label><inputtype="radio"id="second-1star"name="rating"value="1" /><labelclass="full"for="second-1star"title="Umm"></label><inputtype="radio"id="second-halfstar"name="rating"value="0.5" /><labelclass="half"for="second-halfstar"title="Worst"></label></fieldset>