Schaltfläche „Font-Awesome Favorite“ per Klick ändern ⇐ HTML

[Anonymous]

Ich wollte für jedes Element einer Liste von div-Elementen eine Favoritenschaltfläche implementieren. Beim Klicken sollte sich die Schaltfläche „Fa-Star-O“ in eine gelbe Schaltfläche „Fa-Star“ ändern. Es funktioniert, es per Klick wie beabsichtigt zu ändern, aber leider nur für das allererste Element, und ich weiß nicht wirklich, warum und wie ich es ändern soll.
HTML

Code: Select all

[i]

[/i]
[i][/i]

CSS

Code: Select all

 :root {
font: 400 16px/1.5 Verdana;
}

#fav {
display: none;
}

.fa{
position: absolute;
right: 1em;
top: 0.5em;
}
.fa-star{
-webkit-text-fill-color: yellow;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: black;
}

#fav+label {
display: inline-block;
border: 2px grey;
padding: 0px;
cursor: pointer;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}

#fav::after {
color: orange;
}

#fav+label>.fa-star-o {
display: inline-block
}

#fav+label>.fa-star {
display: none;
}

#fav:checked+label>.fa-star-o {
display: none;
}

#fav:checked+label>.fa-star {
display: inline-block
}

Ich weiß wirklich nicht, wie ich es verbessern kann, daher wäre ich sehr dankbar für Hilfe.