how to increment a like button in django with ajax?

i have a post in a community and i have implemented the like button in django + ajax but i notice that when i do like a post it increments all the post’s likes.how can i solve it ? here is my template:

{% for post in posts %}
          <div class="w3-container w3-card w3-white w3-round">
        <a target="_blank" href="{{ post.author.profile.avatar.url }}">
        <img src="{{ post.author.profile.avatar.url }}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px"></a>
        <h4>
        <a href ='{% url 'profile' post.author.pk %}'>{{ post.author.profile.prenom|title }} {{ post.author.profile.nom|title }}</a>
        </h4>
        <span class="w3-opacity">{{ post.created|date:"d-m-Y H:i" }}</span>
         <br>
        <hr class="w3-clear">
        <p>
    {{ post.contenu }}</p>
           <button type="button" class="btn btn-default btn-sm">
          {{ post.comment_set.count }}  <a href='#'><span class="glyphicon glyphicon-comment"></span> </a>
        </button>
    {% if request.user in post.liked.all %}
        <button type="button" class="btn btn-default btn-sm">
              <span class='like_count'>{{ post.liked.count }} </span><a name="{{ post.id }}" style="color: blue;" class="likin" id="co"><span class="glyphicon glyphicon-heart"></span> j'aime</a>
    </button>
    {% else %}
    <button type="button" class="btn btn-default btn-sm">
           <span class='like_count'>{{ post.liked.count }} </span><a name="{{ post.id }}" style="color: black;" class="likin" id="co"><span class="glyphicon glyphicon-heart"></span> j'aime</a>
    </button>
    {% endif %}
    {% if request.user == post.author %}
               <button type="button" class="btn btn-default btn-sm">
          <a href='{% url 'delete' post.id community.id %}'><span class="glyphicon glyphicon-trash"></span> </a>
        </button>
    {% endif %}
    <br>
    <br>
    </div>
    <br>
    {% empty %}
    <span class='w3-opacity'>Aucun post dans cette communaute</span>
    <br>
    <br>
 {% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// AJAX CALL
$('.likin').click(function(){
    $.ajax({
             type: "POST",
             url: "{% url 'like_community' %}",
             data: {'content_id': $(this).attr('name'),'operation':'like_submit','csrfmiddlewaretoken': '{{ csrf_token }}'},
             dataType: "json",
             success: function(response) {
              selector = document.getElementsByName(response.content_id);
                    if(response.liked==true){
                      $(selector).css("color","blue");
                      $('.like_count').html(response.likes_count);
                    }
                    else if(response.liked==false){
                      $(selector).css("color","black");
                      $('.like_count').html(response.likes_count);
                    }


              }

        });

  })
</script>

this is my views.py with the part ajax like:

def like_community(request):
    if request.method =="POST":
        if request.POST.get("operation") == "like_submit" and request.is_ajax():
            content_id=request.POST.get("content_id",None)
            content=get_object_or_404(Post,pk=content_id)
            if content.liked.filter(id=request.user.id): #already liked the content
                content.liked.remove(request.user) #remove user from likes
                liked=False
            else:
                content.liked.add(request.user)
                liked=True
            ctx={"likes_count":content.liked.count() ,"liked":liked,"content_id":content_id}
            return HttpResponse(json.dumps(ctx), content_type='application/json')

i really need a help.i am new in ajax and i just find a tutorial online and i follow but the implementation of count_like button was not there.i will appreciate any help.Merci.

Answer

You seem to have non-unique ID of “co” – Then you use the wrong method document.getElementsByName which returns a collection of NAMED elements but you pass it response.content_id

Also you use $('#response.content_id') which will look for an element with `id=”response.content_id”

Change to

$('.likin').click(function(e){
  e.preventDefault; // stop the link 
  $liked = $(this); // the link clicked
  $.ajax({
    success: function(response) {
       $liked.prev().html(response.likes_count); // the span before the "likin"
       $liked.css("color",response.liked==true ? "blue": "black");
    }