Как правильно дублировать CSS?

Question

Nikita @etozhetisachniy

HTML
CSS

Как правильно дублировать CSS?

Всем привет, очень странный вопрос, создаю опросник и оценка рейтинги будет производиться через *звездочки как в убере*(заказчик)
так вот, проблема в том что проект на Sharepoint и я весь другой контент в виде html добавляю через jquery

вот сами звездочки

звездочки

идет 7 вопросов, и мне нужно сделать чтобы все звезды были уникальными(при нажатии чтобы не дублировалось на все), я использую 1 css. и при добавлении на другие вопросы они дублируются, пробовал добавлять левые цифры к айдишнику, не помогает

вот теги и css, всего будет 7 вопросов
прошу помочь

HTML

<div class="star-rating">
      <div class="star-rating__wrap">
        <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
        <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
        <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
      </div>
    </div>

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";
}

Основная проблема в том что, кликая на второй ряд звезд у меня вторйо ряд только анимацию hover отыгрывает, и кликается только первый ряд