JQuery .addClass применяется ко всему

У меня есть кнопка "Мне нравится", которая использует jQuery. Кнопка "Мне нравится" работает как ожидалось, однако из-за того, как я ее настроил, она меняет каждый значок на странице на сердечко

код:

if (data.liked) {
    updateText(this_, data.likescount, "")
    $(".like-btn").prepend("<i></i>");
    $("i").addClass("fa fa-heart-o liked-heart");  //problem line
} else {
    updateText(this_, data.likescount, "")
    $(".like-btn").prepend("<i></i>");
    $("i").addClass("fa fa-heart-o unliked-heart"); //problem line

Насколько я понимаю, проблема в том, что я добавляю класс fa fa-heart-o ... ко всем элементам i. Как я могу применить его только к кнопке like

?

полный код: 

<script>
    $(document).ready(function(){
         function updateText(btn, newCount, verb){
         btn.text(newCount + " " + verb)
     }

     $(".like-btn").click(function(e){
       e.preventDefault()
       var this_ = $(this)
       var likeUrl = this_.attr("data-href")
       var likeCount = parseInt(this_.attr("data-likes")) | 0
       var addLike = likeCount + 1
       var removeLike = likeCount - 1
       if (likeUrl){
          $.ajax({
           url: likeUrl,
           method: "GET",
           data: {},
           success: function(data){
             console.log(data)
             var newLikes;
             if (data.liked){
                  updateText(this_, data.likescount, "")
                  $(".like-btn").prepend("<i></i>");
                  $( "i" ).addClass( "fa fa-heart-o liked-heart" );
              } else {
                  updateText(this_, data.likescount, "")
                  $(".like-btn").prepend("<i></i>");   
                  $( "i" ).addClass( "fa fa-heart-o unliked-heart" );    

              }
           }, error: function(error){
             console.log(error)
             console.log("error")
           }
         })
       }       
     })
 })
</script> 

<a class="like-btn" data-href='{{ post.get_api_like_url }}' data-likes="{{ post.likes.count }}" href="{{ post.get_like_url }}"><i class="{% if userliked %}fa fa-heart-o liked-heart{% else %}fa fa-heart-o unliked-heart{% endif %}" aria-hidden="true"></i>{{ post.likes.count }}</a>

Когда вы нажимаете на .like-btn, он содержит тег i, почему вы пытаетесь повторить $(".like-btn").prepend("<i></i>"); в success? Поскольку вы сохранили $(this) в переменной this_, вы можете легко получить цель i по this_.find('i') и в методе success, а затем попытаться добавить или удалить класс из выбранного i.

В настоящее время вы нацеливаетесь на каждый '.like-btn' на странице, а также на каждый <i>. Как упоминалось в другом ответе, вы можете использовать функцию jQuery .find(selector), чтобы нацелиться на существующий тег <i> (а не добавлять его) и немного упростить код с помощью комбинации removeClass/addClass 

$(document).ready(function() {

    $(".like-btn").click(function(e) {
      e.preventDefault()
      let this_ = $(this)
      let is_liked = this_.find('i').hasClass('fa-heart');
      if (is_liked) {
        this_.find('i').removeClass('fa-heart').addClass('fa-heart-o');
      } else {
        this_.find('i').removeClass('fa-heart-o').addClass('fa-heart');
      }
    })
  }) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o "></i> 5</a>
<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o"></i> 9</a>
<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o"></i> 12</a>

Вернуться на верх