单击更改“真棒字体收藏夹”按钮

Question

我想对div元素列表中的每个元素实现一个收藏夹按钮。单击时，它应该从fa-star-o按钮变为黄色fa-star按钮。它可以按预期的方式更改点击，但不幸的是，它仅适用于第一个元素，我真的不知道为什么以及如何更改它。

HTML

<input id='fav' type='checkbox'>
          <label for='fav'>
            <i class="fa fa-star-o fa-3x" ></i>
            <i class="fa fa-star fa-3x" ></i>
          </label> 

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
  }

我真的不知道如何改进它，因此非常感谢您的帮助。