Кнопка «Изменить избранное Font-Awesome» при нажатии ⇐ Html

[Anonymous]

Я хотел добавить кнопку избранного для каждого элемента списка элементов div. При нажатии она должна измениться с кнопки fa-star-o на желтую кнопку fa-star. Он работает, чтобы изменить его при нажатии, как и предполагалось, но, к сожалению, только для самого первого элемента, и я действительно не знаю, почему и как его изменить.
HTML

Код: Выделить всё

[i]

[/i]
[i][/i]

CSS

Код: Выделить всё

 :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
}

Я действительно не знаю, как его улучшить, поэтому буду очень благодарен за помощь.

Подробнее здесь: https://stackoverflow.com/questions/627 ... n-on-click