Specify a unique id for multiple forms in one page?

Question

JavaScript

Hello! Help solve the problem.

In general, on one page there is a list of tasks and each task has a list of comments and all this on one page. That is, for each task there is a form for adding comments. It turns out on one page several forms.

I use the following code to update the list of comments via AJAX, but only the comments for the first task are updated correctly. I think the problem is that I use the id for the form and it's the same for everyone and JS looking at the document looks for the first match in the document, so only the first form for adding and updating the list of comments works correctly.

I tried specifying class instead of id, but it didn't help. I also tried to specify the form id in the template as `task-comment-form-{{forloop.counter}}`, thereby making the form id unique, but I can’t figure out how to write this further in JS. How to solve this problem?

javascript:

$("#task-comment-form").submit(function(event) {
    event.preventDefault();
    console.log(event.preventDefault());
    var form = $(this);
    $.ajax({
        url: form.attr("action"),
        data: form.serialize(),
        type: form.attr("method"),
        dataType: 'json',
        success: function (data) {
            if (data.form_is_valid) {
                $("#task-comments").html(data.html_task_comment);
            }
            else {
                $("#task-comment-form").html(data.html_task_comment_form);
            }
        }
    });
    $("#task-comment-form")[0].reset();
    return false;
});

task_list.html:

<div class="list-group custom-list-group">
   <div class="list-group-item bg-faded">
      {% include 'project/task_comment_form.html' %}
   </div>
   <div id="task-comments">
      {% include 'project/task_comment_list.html' %}
   </div>
</div>

task_comment_form.html:

<form method="post" id="task-comment-form" action="{% url 'project:task_comment_add' project_code=project.code group_task_code=group_task.code task_code=task.code %}">
     <button type="submit"></button>
</form>

task_comment_list.html:

{% for comment  in task.comments.all %}
    <div class="list-group-item flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h6 class="mb-1">{{ comment.author }}</h6>
            <small>{{ comment.created }}</small>
        </div>
        <p class="custom-p">{{ comment.text }}</p>
    </div>
{% empty %}
    <div class="list-group-item flex-column align-items-start">
        <div class="d-flex w-100 justify-content-center">
            <h6 class="mb-1 custom-h"><i class="fa fa-info-circle" aria-hidden="true"></i>&#9;{% trans 'NO COMMENTS' %}</h6>
        </div>
    </div>
{% endfor %}

Answer 1

I think the problem is that I use the id for the form and everyone has the same

You think correctly, id is the unique value of the element, it should not be repeated on the page.
change your code like this:

$(document).ready(function () {
$("form").on("submit", (function(event) {
    event.preventDefault();
    console.log(event.preventDefault());
    var form = $(this);
    $.ajax({
        url: form.attr("action"),
        data: form.serialize(),
        type: form.attr("method"),
        dataType: 'json',
        success: function (data) {
            if (data.form_is_valid) {
                $("#task-comments").html(data.html_task_comment);
            }
            else {
                $("#task-comment-form").html(data.html_task_comment_form);
            }
        }
    });
    $("#task-comment-form")[0].reset();
    return false;
});
});