Estoy intentando manejar dentro de un formulario un rating pero estoy presentando el problema de que al seleccionar cualquier item diferente al primero siempre se me queda marcado el primer item, comparto en un snipper el codigo hmtl y css
.rating {
position: absolute;
/*top: 50%;*/
/*left: 50%;*/
transform: translate( 0, -40%) rotateY(180deg);
display: flex;
}
.rating input {
display: none;
}
.rating label {
display: block;
cursor: pointer;
width: 45px;
}
.rating label:before {
content: '\f005';
font-family: fontAwesome;
position: relative;
display: block;
font-size: 30px;
color: lightgray;
}
.rating label:after {
content: '\f005';
font-family: fontAwesome;
position: absolute;
display: block;
font-size: 30px;
color: black;
top: 0;
opacity: 0;
transition: .5s;
text-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.rating label:hover:after,
.rating label:hover ~ label:after,
.rating input:checked ~ label:after{
opacity: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="list-group-item">
<div class="rating">
<input type="radio" name="star" id="star5"><label for="star5" title="5 estrellas"></label>
<input type="radio" name="star" id="star4"><label for="star4" title="4 estrellas"></label>
<input type="radio" name="star" id="star3"><label for="star3" title="3 estrellas"></label>
<input type="radio" name="star" id="star2"><label for="star2" title="2 estrellas"></label>
<input type="radio" name="star" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
</li>
</br></br>
<li class="list-group-item">
<div class="rating">
<input type="radio" name="star" id="star5"><label for="star5" title="5 estrellas"></label>
<input type="radio" name="star" id="star4"><label for="star4" title="4 estrellas"></label>
<input type="radio" name="star" id="star3"><label for="star3" title="3 estrellas"></label>
<input type="radio" name="star" id="star2"><label for="star2" title="2 estrellas"></label>
<input type="radio" name="star" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
</li>
</br></br>
<li class="list-group-item">
<div class="rating">
<input type="radio" name="star" id="star5"><label for="star5" title="5 estrellas"></label>
<input type="radio" name="star" id="star4"><label for="star4" title="4 estrellas"></label>
<input type="radio" name="star" id="star3"><label for="star3" title="3 estrellas"></label>
<input type="radio" name="star" id="star2"><label for="star2" title="2 estrellas"></label>
<input type="radio" name="star" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
</li>
</br></br>
<li class="list-group-item">
<div class="rating">
<input type="radio" name="star" id="star5"><label for="star5" title="5 estrellas"></label>
<input type="radio" name="star" id="star4"><label for="star4" title="4 estrellas"></label>
<input type="radio" name="star" id="star3"><label for="star3" title="3 estrellas"></label>
<input type="radio" name="star" id="star2"><label for="star2" title="2 estrellas"></label>
<input type="radio" name="star" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
</li>
</br></br>