Comment on multiple post objects on a single page using jQuery ajax in Django

I've been trying to implement a comment function with jQuery ajax in Django to allow me comment on multiple post object on a single page, but somehow I have a challenge figuring why I am getting the same comment repeated in other other post object comments, when commenting on a first post i sent the comment to the database without any issues but when I try comment on a second post on the same page it repeats the first comment for the second post on the same page, even thought the comment doesn't relate to that post object. To be clear why is ajax repeating my comment for other post object and if I refresh the post and try comment on another post object it send an empty post to the database how do I resolve this situation as when I comment on the first object it works fine but the when I try with the second post object it just repeat the first comment for the second post object.

My view for comment
def feedComment(request):
    if request.method == 'GET':
        post_id = request.GET['id']
        comment = request.GET['comment_text']
        post_obj = Post.objects.get(id=post_id)
        create_comment = Comment.objects.create(post=post_obj, username=request.user, comment=comment)
        create_comment.save()
    return JsonResponse({'comment':create_comment.comment,})

my ajax function for comment

<script type="text/javascript">
    function ajax($this) {
        var id = $this.attr("id");
        var ul_menu =$('#menu');
        var comment = $('#comment').val();
    
        $.ajax({
            method: "GET",
            url: '{% url "feed:addcomment" %}',
            dataType: "json",
            data: {
                comment_text: comment,
                id: id,
            },
            success: function (data) {
                   if(data.comment)
                     {
                  var comment_res = $this(data.comment);
                  var div_html = ('<div class="flex" ><div class="w-10 h-10 rounded-full relative flex-shrink-0"><img src="{{request.user.profile_image.url}}" alt="" class="absolute h-full rounded-full w-full"></div><div class="text-gray-700 py-2 px-3 rounded-md bg-gray-100 relative lg:ml-5 ml-2 lg:mr-12  dark:bg-gray-800 dark:text-gray-100"><p class="leading-6">'+comment_res+'</p><div class="absolute w-3 h-3 top-3 -left-1 bg-gray-100 transform rotate-45 dark:bg-gray-800"></div></div></div>');
        ul_menu.prepend(div_html);
                
             }
            }
        });
    }
</script>

Comment form

.....
<div class="border-t py-4 space-y-4 dark:border-gray-600" id="menu">
  {% for comment in post.comments.all %}
    {% if forloop.counter|divisibleby:2 %}
      <img src="{{comment.username.profile_image.url}}" alt="{{comment.username.profile_image.url}}" class="absolute h-full rounded-full w-full"></div>
         <div>
<div class="text-gray-700 py-2 px-3 rounded-md bg-gray-100 relative lg:ml-5 ml-2 lg:mr-12 dark:bg-gray-800 dark:text-gray-100">
<p class="leading-6"> {{comment.comment}} <i class="uil-grin-tongue-wink-alt"></i> </p>
<span> {{ comment.comment_date|timesince }} </span></div></div></div>
{% endif %}
{% endfor %} 
....
<input class="material-icons" id="{{post.id}}" type="submit"  value="Comment"  onclick="ajax($(this));return false;">
```

Back to Top