Дублирование звездных вопросов

Question

Я внедрил систему оценки пользователей по звездам, используя только html и css. Рейтинг работает отлично, но когда я пытаюсь его дублировать, у меня возникают проблемы с сохранением рейтинга на дублирующейся записи. Пожалуйста, см. Codepen (https://codepen.io/margin707/pen/mdebMOZ) или код ниже:

/*rating1*/

.ratingControl {
  position: relative;
  width: 220px;
  height: 45px;
  user-select: none;
  margin: 0 auto;
}

.ratinginput1 {
  visibility: hidden;
}

.ratingControl-stars {
  position: absolute;
  top: 0;
  width: 40px;
  height: 65px;
  background-image: url('https://i.imgur.com/86OG0nb.png');
  background-size: auto 45px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ratingControl-stars:hover,
.ratingControl-stars:hover~.ratingControl-stars,
.ratinginput1:checked~.ratingControl-stars {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl-stars:active,
.ratingControl-stars:active~.ratingControl-stars,
.ratinginput1:checked~.ratingControl-stars:active {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl-stars--1 {
  left: 10px;
}

.ratingControl-stars--2 {
  left: 50px;
}

.ratingControl-stars--3 {
  left: 90px;
}

.ratingControl-stars--4 {
  left: 130px;
}

.ratingControl-stars--5 {
  left: 170px;
}


/*rating2*/

.ratingControl2 {
  position: relative;
  width: 220px;
  height: 45px;
  user-select: none;
  margin: 0 auto;
}

.ratinginput2 {
  visibility: hidden;
}

.ratingControl2-stars {
  position: absolute;
  top: 0;
  width: 40px;
  height: 65px;
  background-image: url('https://i.imgur.com/86OG0nb.png');
  background-size: auto 45px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ratingControl2-stars:hover,
.ratingControl2-stars:hover~.ratingControl2-stars,
.ratinginput2:checked~.ratingControl2-stars {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl2-stars:active,
.ratingControl2-stars:active~.ratingControl2-stars,
.ratinginput2:checked~.ratingControl2-stars:active {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl2-stars--1 {
  left: 10px;
}

.ratingControl2-stars--2 {
  left: 50px;
}

.ratingControl2-stars--3 {
  left: 90px;
}

.ratingControl2-stars--4 {
  left: 130px;
}

.ratingControl2-stars--5 {
  left: 170px;
}

<div class="ratingControl"><input class="ratinginput1" id="rating-5" name="rating" type="radio" value="5" />
  <label class="filledStars ratingControl-stars ratingControl-stars--5" for="rating-5">5</label>
  <input class="ratinginput1" id="rating-4" name="rating" type="radio" value="4" />
  <label class="filledStars ratingControl-stars ratingControl-stars--4" for="rating-4">4</label>
  <input class="ratinginput1" id="rating-3" name="rating" type="radio" value="3" />
  <label class="filledStars ratingControl-stars ratingControl-stars--3" for="rating-3">3</label>
  <input class="ratinginput1" id="rating-2" name="rating" type="radio" value="2" />
  <label class="filledStars ratingControl-stars ratingControl-stars--2" for="rating-2">2</label>
  <input class="ratinginput1" id="rating-1" name="rating" type="radio" value="1" />
  <label class="filledStars ratingControl-stars ratingControl-stars--1" for="rating-1">1</label></div>
<br>
<div class="ratingControl2"><input class="ratinginput2" id="rating-5" name="rating" type="radio" value="5" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--5" for="rating-5">5</label>
  <input class="ratinginput2" id="rating-4" name="rating" type="radio" value="4" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--4" for="rating-4">4</label>
  <input class="ratinginput2" id="rating-3" name="rating" type="radio" value="3" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--3" for="rating-3">3</label>
  <input class="ratinginput2" id="rating-2" name="rating" type="radio" value="2" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--2" for="rating-2">2</label>
  <input class="ratinginput2" id="rating-1" name="rating" type="radio" value="1" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--1" for="rating-1">1</label></div>

Я попытался изменить все имена классов для дублирующейся записи, но все равно он обновит только оригинал. Я подозреваю, что это как-то связано с символом ~, но не смог добраться до root проблемы после нескольких часов отладки. Любая помощь очень ценится!

Answer 1

Спасибо за быстрый ответ. Что изменило атрибут for для ввода.

Для второй записи я изменил его с:

<div class="ratingControl2"><input class="ratinginput2" id="rating2-5" name="rating2" type="radio" value="6" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--5" for="rating-5">5</label>
<input class="ratinginput2" id="rating2-4" name="rating2" type="radio" value="7" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--4" for="rating-4">4</label>
<input class="ratinginput2" id="rating2-3" name="rating2" type="radio" value="8" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--3" for="rating-3">3</label>
<input class="ratinginput2" id="rating2-2" name="rating2" type="radio" value="9" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--2" for="rating-2">2</label>
<input class="ratinginput2" id="rating2-1" name="rating2" type="radio" value="10" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--1" for="rating-1">1</label></div>

на

<div class="ratingControl2"><input class="ratinginput2" id="rating2-5" name="rating2" type="radio" value="6" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--5" for="rating2-5">5</label>
<input class="ratinginput2" id="rating2-4" name="rating2" type="radio" value="7" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--4" for="rating2-4">4</label>
<input class="ratinginput2" id="rating2-3" name="rating2" type="radio" value="8" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--3" for="rating2-3">3</label>
<input class="ratinginput2" id="rating2-2" name="rating2" type="radio" value="9" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--2" for="rating2-2">2</label>
<input class="ratinginput2" id="rating2-1" name="rating2" type="radio" value="10" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--1" for="rating2-1">1</label></div>

Спасибо за быстрая помощь, ребята !!!

Answer 2

Вы не можете иметь более одного значения id в документе. Вы должны быть уверены, что в вашем коде никогда не будет дубликатов id; это обязательно .

Кроме того, все ваши радиокнопки имеют одинаковый атрибут name, что означает, что можно выбрать только одну из них. Убедитесь, что все переключатели в одной группе имеют общее имя, и что каждая группа получает свое имя. Обычно этого легко добиться, добавив число в конце атрибута name и сосчитав это число:

/*rating1*/

.ratingControl {
  position: relative;
  width: 220px;
  height: 45px;
  user-select: none;
  margin: 0 auto;
}

.ratinginput1 {
  visibility: hidden;
}

.ratingControl-stars {
  position: absolute;
  top: 0;
  width: 40px;
  height: 65px;
  background-image: url('https://i.imgur.com/86OG0nb.png');
  background-size: auto 45px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ratingControl-stars:hover,
.ratingControl-stars:hover~.ratingControl-stars,
.ratinginput1:checked~.ratingControl-stars {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl-stars:active,
.ratingControl-stars:active~.ratingControl-stars,
.ratinginput1:checked~.ratingControl-stars:active {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl-stars--1 {
  left: 10px;
}

.ratingControl-stars--2 {
  left: 50px;
}

.ratingControl-stars--3 {
  left: 90px;
}

.ratingControl-stars--4 {
  left: 130px;
}

.ratingControl-stars--5 {
  left: 170px;
}


/*rating2*/

.ratingControl2 {
  position: relative;
  width: 220px;
  height: 45px;
  user-select: none;
  margin: 0 auto;
}

.ratinginput2 {
  visibility: hidden;
}

.ratingControl2-stars {
  position: absolute;
  top: 0;
  width: 40px;
  height: 65px;
  background-image: url('https://i.imgur.com/86OG0nb.png');
  background-size: auto 45px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ratingControl2-stars:hover,
.ratingControl2-stars:hover~.ratingControl2-stars,
.ratinginput2:checked~.ratingControl2-stars {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl2-stars:active,
.ratingControl2-stars:active~.ratingControl2-stars,
.ratinginput2:checked~.ratingControl2-stars:active {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl2-stars--1 {
  left: 10px;
}

.ratingControl2-stars--2 {
  left: 50px;
}

.ratingControl2-stars--3 {
  left: 90px;
}

.ratingControl2-stars--4 {
  left: 130px;
}

.ratingControl2-stars--5 {
  left: 170px;
}

<div class="ratingControl">
  <input class="ratinginput1" id="group-0-rating-5" name="rating-0" type="radio" value="5" />
  <label class="filledStars ratingControl-stars ratingControl-stars--5" for="group-0-rating-5">5</label>
  <input class="ratinginput1" id="group-0-rating-4" name="rating-0" type="radio" value="4" />
  <label class="filledStars ratingControl-stars ratingControl-stars--4" for="group-0-rating-4">4</label>
  <input class="ratinginput1" id="group-0-rating-3" name="rating-0" type="radio" value="3" />
  <label class="filledStars ratingControl-stars ratingControl-stars--3" for="group-0-rating-3">3</label>
  <input class="ratinginput1" id="group-0-rating-2" name="rating-0" type="radio" value="2" />
  <label class="filledStars ratingControl-stars ratingControl-stars--2" for="group-0-rating-2">2</label>
  <input class="ratinginput1" id="group-0-rating-1" name="rating-0" type="radio" value="1" />
  <label class="filledStars ratingControl-stars ratingControl-stars--1" for="group-0-rating-1">1</label>
</div>
<br>
<div class="ratingControl2">
  <input class="ratinginput2" id="group-1-rating-5" name="rating-1" type="radio" value="5" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--5" for="group-1-rating-5">5</label>
  <input class="ratinginput2" id="group-1-rating-4" name="rating-1" type="radio" value="4" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--4" for="group-1-rating-4">4</label>
  <input class="ratinginput2" id="group-1-rating-3" name="rating-1" type="radio" value="3" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--3" for="group-1-rating-3">3</label>
  <input class="ratinginput2" id="group-1-rating-2" name="rating-1" type="radio" value="2" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--2" for="group-1-rating-2">2</label>
  <input class="ratinginput2" id="group-1-rating-1" name="rating-1" type="radio" value="1" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--1" for="group-1-rating-1">1</label>
</div>