В Django, как перезагрузить определенные параметры кнопки без перезагрузки страницы

Я создаю метод лайков для сайта типа социальной сети, в настоящее время я могу обновлять лайки, если я перезагружаю всю страницу каждый раз, когда пользователю нравится, но как и на остальных сайтах это не имеет такого эффекта Я хотел бы устранить перезагрузку, но я не смог, я попробовал асинхронный вызов, но он работает только на первом элементе, и я не знаю, как продолжить, чтобы устранить этот метод обновления в лайках

мой html для каждой карты

    <div class="media pt-3 pl-3 pb-1">
        <a href="{% url "users:detail" post.user.username %}">
            <img class="mr-3 rounded-circle" height="35" src="{{ post.profile.picture.url }}" alt="{{ post.user.get_full_name }}">
        </a>
        <div class="media-body">
            <p style="margin-top: 5px;">{{ post.user.get_full_name  }}</p>
        </div>
    </div>

    <img style="width: 100%;" src="{{ post.photo.url }}" alt="{{ post.title }}">

    <p class="mt-1 ml-2" >
        <a style="color: #000; font-size: 20px;" id="like_heart" data-id="{{ post.pk }}" data-url="{% url 'posts:likes2' %}">
            <i class="{% if request.user in post.likes_users.all %} fas fa-heart {% else %} far fa-heart {% endif %}"
             id="success_like"></i>
        </a> <i id="value_like">{{ post.likes_users.count }}</i>
    </p>
    <p class="ml-2 mt-0 mb-2">
        <b>{{ post.title }}</b> - <small>{{ post.created }}</small>
    </p>
</div>

мой вызов ajax

$(document).ready(function(){
    // ajax for call in post
    $("#like_heart").on("click",function(e){
        // e.preventDefault();
        var id = $(this).data("id");
  
        $.ajax({
        //   url: 'posts/likes2/',
          url: $(this).data("url"),
          data: {
            'pk': id
          },
          dataType: 'json',
          success: function (data) {
            if (data['like']) {
                $('#success_like').removeClass("far fa-heart").addClass("fas fa-heart");
            }
            else {
                $('#success_like').removeClass("fas fa-heart").addClass("far fa-heart");
            }
            var body = '<i id="value_like">' + data['value'] +'</i>'
            $('#value_like').html( body );
          }
        });
    })
})

мое действие просмотра из ajax

def likes_view(request):
    pk = request.GET.get('pk', None)
    post_id = Posts.objects.get(pk=pk)
    likes_users = User.objects.get(username=request.user)

    if post_id.likes_users.filter(username=request.user).exists():
        post_id.likes_users.remove(likes_users)
    else:
        post_id.likes_users.add(likes_users)
    data = {'like': post_id.likes_users.filter(username=request.user).exists(), 'value': post_id.likes_users.count()}
    return JsonResponse(data)

есть идеи?

    <div class="media pt-3 pl-3 pb-1">
        <a href="{% url "users:detail" post.user.username %}">
            <img class="mr-3 rounded-circle" height="35" src="{{ post.profile.picture.url }}" alt="{{ post.user.get_full_name }}">
        </a>
        <div class="media-body">
            <p style="margin-top: 5px;">{{ post.user.get_full_name  }}</p>
        </div>
    </div>

    <img style="width: 100%;" src="{{ post.photo.url }}" alt="{{ post.title }}">

    <p class="mt-1 ml-2" >
        <a style="color: #000; font-size: 20px;" class="like-link" data-id="{{ post.pk }}" data-url="{% url 'posts:likes2' %}">
            <i class="{% if request.user in post.likes_users.all %} fas fa-heart {% else %} far fa-heart {% endif %} like-toggle" data-id="{{ post.pk }}"></i>
        </a> <i class="like-count" data-id="{{ post.pk }}">{{ post.likes_users.count }}</i>
    </p>
    <p class="ml-2 mt-0 mb-2">
        <b>{{ post.title }}</b> - <small>{{ post.created }}</small>
    </p>

$(document).ready(function() {
  // ajax for call in post
  $(".like-link").on("click", function(e) {
    // e.preventDefault();
    var id = $(this).data("id");

    $.ajax({
      //   url: 'posts/likes2/',
      url: $(this).data("url"),
      data: {
        'pk': id
      },
      dataType: 'json',
      success: function(data) {
        if (data['like']) {
          $('.like-toggle[data-id=' + id + ']').removeClass("far fa-heart").addClass("fas fa-heart");
        } else {
          $('.like-toggle[data-id=' + id + ']').removeClass("fas fa-heart").addClass("far fa-heart");
        }
        var body = '<i id="value_like">' + data['value'] + '</i>'
        $('.like-count[data-id=' + id + ']').html(body);
      }
    });
  })
})