Ajax Like Button.(Когда я нажимаю на кнопку Like, только 1-е сообщение нравится. Даже если я нажимаю на 2-е сообщение, 1-е сообщение меняется)

Моя проблема в заголовке.
Я не знаю, откуда взялась проблема, но мне кажется, что в моем коде чего-то не хватает.
что я должен добавить в код?
Я не думаю, что есть ошибка в импорте из моих других html шаблонов.
Я думаю, что мне нужно внести изменения в def или ajax код, чтобы решить проблему.

models.py

class Post(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    content =  models.ManyToManyField(PostFileContent, related_name='contents')
    caption = models.TextField(max_length=1500, verbose_name='Caption')
    posted = models.DateTimeField(auto_now_add=True)
    tags = models.ManyToManyField(Tag, related_name='tags')
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    likes = models.ManyToManyField(
        User, related_name='like', default=None, blank=True)
    like_count = models.BigIntegerField(default='0')

views.py

@ login_required
def like(request):
    if request.POST.get('action') == 'post':
        result = ''
        id = request.POST.get('postid')
        post = get_object_or_404(Post, id=id)
        if post.likes.filter(id=request.user.id).exists():
            post.likes.remove(request.user)
            post.like_count -= 1
            result = post.like_count
            post.save()
        else:
            post.likes.add(request.user)
            post.like_count += 1
            result = post.like_count
            post.save()

        return JsonResponse({'result': result, })

urls.py

urlpatterns = [

path('like/', like, name='like'),
   ]

Myscript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
         $(document).on('click', '#like-button', function (e) {
           e.preventDefault();
           $.ajax({
             type: 'POST',
             url: '{% url "like" %}',
             data: {
               postid: $('#like-button').val(),
               csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
               action: 'post'
             },
             success: function (json) {
               document.getElementById("like_count").innerHTML = json['result']
             },
             error: function (xhr, errmsg, err) {
       
             }
           });
         })
   </script>

myLikeButton

  {% if request.user.is_authenticated %}
          
  <button style="margin-top: 10px;" class="btn btn-light Like_button_detail" id="like-button" value="{{ post_item.id }}">
    <img style="width: 32px; height:32px;" src="{% static 'img/likeTrue.png' %}" />
    <br>
    <span class="" id="like_count">{{post_item.like_count}}</span>
  </button>

  {% endif %}

myAllPages.html (изменено ajax)

Ваш JQuery слушает id="like-button", но ID уникальны в HTML. Поэтому он всегда будет воздействовать на первый найденный элемент с этим ID. Вместо этого вам следует присвоить кнопке like класс "like-button" и изменить функцию on click, чтобы она проверяла наличие контейнеров с этим классом.

Изменения будут выглядеть следующим образом:

Для HTML:

  <button style="margin-top: 10px;" class="btn btn-light Like_button_detail like-button" value="{{ post_item.id }}">

Для части JS:

$(document).on('click', '.like-button', function (e) {

и: 

postid: $(this).val(),
Вернуться на верх