many star ratings on one page only pure css - html

Question

I have few films (for example) on one page. And I have to be able to rate them with pure css stars. The code I have can do it with only first rating, after selecting second - first rating resetting.
You can see it in code below:
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.card input {
display: none;
}
.card label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.card label {
color: #ddd;
float: right;
}
fieldset {
border: none;
margin: 0;
padding: 0;
/*float: left;*/
}
fieldset > input:checked ~ label,
fieldset:not(:checked) > label:hover,
fieldset:not(:checked) > label:hover ~ label {
color: #FFD700;
}
fieldset > input:checked + label:hover,
fieldset > input:checked ~ label:hover,
fieldset > label:hover ~ input:checked ~label,
fieldset > input:checked ~ label:hover ~label {
color: #FFED85;
}
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-1">
<input type="radio" name="stars" id="star-1" value="1">
<label for="star-1"></label>
<input type="radio" name="stars" id="star-2" value="2">
<label for="star-2"></label>
<input type="radio" name="stars" id="star-3" value="3">
<label for="star-3"></label>
<input type="radio" name="stars" id="star-4" value="4">
<label for="star-4"></label>
<input type="radio" name="stars" id="star-5" value="5">
<label for="star-5"></label>
</fieldset>
//...
</div>
</div>
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-2">
<input type="radio" name="stars" id="star-6" value="1">
<label for="star-6"></label>
<input type="radio" name="stars" id="star-7" value="2">
<label for="star-7"></label>
<input type="radio" name="stars" id="star-8" value="3">
<label for="star-8"></label>
<input type="radio" name="stars" id="star-9" value="4">
<label for="star-9"></label>
<input type="radio" name="stars" id="star-10" value="5">
<label for="star-10"></label>
</fieldset>
//...
</div>
</div>
How to make them work separate?
I will appreciate all kinds of support.
Waiting for your help, friends.

Answer 1

You have to use the different name for the second radiobuttons set.
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.card input {
display: none;
}
.card label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.card label {
color: #ddd;
float: right;
}
fieldset {
border: none;
margin: 0;
padding: 0;
/*float: left;*/
}
fieldset > input:checked ~ label,
fieldset:not(:checked) > label:hover,
fieldset:not(:checked) > label:hover ~ label {
color: #FFD700;
}
fieldset > input:checked + label:hover,
fieldset > input:checked ~ label:hover,
fieldset > label:hover ~ input:checked ~label,
fieldset > input:checked ~ label:hover ~label {
color: #FFED85;
}
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-1">
<input type="radio" name="stars" id="star-1" value="1">
<label for="star-1"></label>
<input type="radio" name="stars" id="star-2" value="2">
<label for="star-2"></label>
<input type="radio" name="stars" id="star-3" value="3">
<label for="star-3"></label>
<input type="radio" name="stars" id="star-4" value="4">
<label for="star-4"></label>
<input type="radio" name="stars" id="star-5" value="5">
<label for="star-5"></label>
</fieldset>
//...
</div>
</div>
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-2">
<input type="radio" name="stars_1" id="star-6" value="1">
<label for="star-6"></label>
<input type="radio" name="stars_1" id="star-7" value="2">
<label for="star-7"></label>
<input type="radio" name="stars_1" id="star-8" value="3">
<label for="star-8"></label>
<input type="radio" name="stars_1" id="star-9" value="4">
<label for="star-9"></label>
<input type="radio" name="stars_1" id="star-10" value="5">
<label for="star-10"></label>
</fieldset>
//...
</div>
</div>