How to properly implement the CSS rating system?

Question

css

Hello!
I already had this question.
I had a problem with the uniqueness of the rating system. there are 7 questions, all of them are made through sharepoint, the problem is that initially I can not change anything.
it looks like this:

<tr><td><span class="ms-RadioText" title="1"><input id="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField0" type="radio" name="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField" value="1" checked="checked" aria-label="blablabla"><label for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField0">1</label></span></td></tr>

and so 7 questions the difference in the uniqueness of id and label
I add this css star

star.css

.star-rating{
  font-size: 0;
}
.star-rating__wrap{
  display: inline-block;
  font-size: 1rem;
}
.star-rating__wrap:after{
  content: "";
  display: table;
  clear: both;
}
.star-rating__ico{
  float: right;
  padding-left: 2px;
  cursor: pointer;
  color: #FFB300;
}
.star-rating__ico:last-child{
  padding-left: 0;
}
.star-rating__input{
  display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
  content: "\f005";
}

and then I find all the standard inputs through jquery and add a class to them .star-rating__input
in which display: none;
after I add via JS label in which the design of the stars goes

jQuery

$(firstTable).append('<div class="star-rating" id="pastOne" >'); // a
    $(firstTable).append(' <div class="star-rating__wrap" id="divOne">'); // b 
    $(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField4" title="5 out of 5 stars"></label>');
    $(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField3" title="4 out of 5 stars"></label>');
    $(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField2" title="3 out of 5 stars"></label>');
    $(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField1" title="2 out of 5 stars"></label>');
    $(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField0" title="1 out of 5 stars"></label>');
    $(firstTable).append('</div>');
    $(firstTable).append('</div>');

and when I do this for each table, I have a problem with the uniqueness of the css stars themselves, when clicking on any other row, the stars are added only to the first question, which has a unique css like all others
(the functionality works fine, but the css part disappears) is this possible due to the fact that I use {
content: "\f005";
}
which leads to a picture of a filled star? And how to change this content then?

Answer 1

Where is the click code?
Most likely, you do not sort through the element in the array, but look for the very first one and click on it.
try using this to add a class to the click function