Создание древовидных комментариев, добавление JavaScript

from django.http import JsonResponse


class CommentCreateView(LoginRequiredMixin, CreateView):
    form_class = CommentCreateForm

    def is_ajax(self):
        return self.request.headers.get("X-Requested-With") == "XMLHttpRequest"

    def form_invalid(self, form):
        if self.is_ajax():
            return JsonResponse({"error": form.errors}, status=400)
        return super().form_invalid(form)

    def form_valid(self, form):
        comment = form.save(commit=False)
        comment.article_id = self.kwargs.get("pk")
        comment.author = self.request.user
        comment.parent_id = form.cleaned_data.get("parent")
        comment.save()

        if self.is_ajax():
            return JsonResponse({
                "is_child": comment.is_child_node(),
                "id": comment.id,
                "author": comment.author.username,
                "parent_id": comment.parent_id,
                "time_create": comment.time_create.strftime("%Y-%b-%d %H:%M:%S"),
                "avatar": comment.author.profile.avatar.url,
                "content": comment.content,
                "get_absolute_url": comment.author.profile.get_absolute_url(),
            }, status=200)

        return redirect(comment.article.get_absolute_url())

    def handle_no_permission(self):
        return JsonResponse({"error": "Необходимо авторизоваться для добавления комментариев"}, status=400)

const commentForm = document.forms.commentForm;
const commentFormContent = commentForm.content;
const commentFormParentInput = commentForm.parent;
const commentFormSubmit = commentForm.commentSubmit;
const commentArticleId = commentForm.getAttribute("data-article-id");

commentForm.addEventListener("submit", createComment);

replyUser();

function replyUser() {
    document.querySelectorAll(".btnReply").forEach((element) => {
        element.addEventListener("click", replyComment);
    });
}

function replyComment() {
    const commentUsername = this.getAttribute("data-comment-username");
    const commentMessageId = this.getAttribute("data-comment-id");
    commentFormContent.value = `${commentUsername}, `;
    commentFormParentInput.value = commentMessageId;
    commentFormContent.focus();
}

async function createComment(event) {
    event.preventDefault();
    commentFormSubmit.disabled = true;
    commentFormSubmit.innerText = "Ожидаем ответа сервера";
    try {
        const response = await fetch(commentForm.action, {
            method: "POST",
            headers: {
                "X-CSRFToken": csrftoken,
                "X-Requested-With": "XMLHttpRequest",
            },
            body: new FormData(commentForm),
        });
        const comment = await response.json();
        if (!response.ok) {
            throw new Error(comment.error ? JSON.stringify(comment.error) : "Ошибка сервера");
        }

        const commentTemplate = `
            <ul id="comment-thread-${comment.id}">
              <li class="card border-0">
                <div class="row">
                  <div class="col-md-2">
                    <img src="${comment.avatar}" style="width: 80px; height: 80px; object-fit: cover;" alt="${comment.author}"/>
                  </div>
                  <div class="col-md-10">
                    <div class="card-body">
                      <h6 class="card-title"><a href="${comment.get_absolute_url}">${comment.author}</a></h6>
                      <p class="card-text"></p>
                      <a class="btn btn-sm btn-dark btnReply" href="#commentForm"
                         data-comment-id="${comment.id}" data-comment-username="${comment.author}">Ответить</a>
                      <hr/>
                      <time>${comment.time_create}</time>
                    </div>
                  </div>
                </div>
              </li>
            </ul>`;

        if (comment.is_child) {
            document.querySelector(`#comment-thread-${comment.parent_id}`)
                .insertAdjacentHTML("beforeend", commentTemplate);
        } else {
            document.querySelector(".nested-comments")
                .insertAdjacentHTML("beforeend", commentTemplate);
        }
        // текст вставляем через textContent — так он не выполнится как HTML
        document.querySelector(`#comment-thread-${comment.id} .card-text`).textContent = comment.content;

        commentForm.reset();
        commentFormParentInput.value = null;
        replyUser();
    } catch (error) {
        console.log(error);
        alert(error.message);
    } finally {
        commentFormSubmit.disabled = false;
        commentFormSubmit.innerText = "Добавить комментарий";
    }
}

<script>const csrftoken = "{{ csrf_token }}";</script>

<form method="post" action="{% url 'comment_create_view' article.pk %}" id="commentForm" name="commentForm" data-article-id="{{ article.pk }}">

{% block script %}
  <script src="{% static 'custom/js/comments.js' %}"></script>
{% endblock %}