All buttons effect only the first button, but not themselves

I have dynamically generated buttons, but whichever I click, every time the first one gets "selected" or diselected (depends on its previous state). I want to toggle them independently.

<button  @click="toggleLike()" class="mr-2">          <i id="but" class="fa-thumbs-up" :class="{ fas: isLiked, far: !isLiked }"></i>  

 toggleLike() {        if(this.movieData.likes == 0) {            $('#but').removeClass('far');          $('#but').addClass('fas');                  this.movieData.likes+1;          }          else {            $('#but').removeClass('fas');          $('#but').addClass('far');}        return this.$store.dispatch("updateMovieLikes", {          imdbID: this.movie.imdbID,        });      },  

https://stackoverflow.com/questions/67310464/all-buttons-effect-only-the-first-button-but-not-themselves April 29, 2021 at 11:03AM