Элементы JavaScript добавляются несколько раз

Я создаю веб-приложение, используя Django, и одна из его веб-страниц позволяет пользователю комментировать чужие сообщения. Когда пользователь комментирует, я использую Javascript для добавления комментария в базу данных и отображения его среди других комментариев в div под названием "comment_list". Когда я комментирую под постом в первый раз, комментарий добавляется правильно, только один раз. Но когда я комментирую второй раз, не обновляя страницу, он добавляется дважды. В третий раз он добавляется трижды, в четвертый - 4 раза и так далее.

Это мой HTML код

<button class="btn btn-dark" id="comment_{{post.id}}" onclick="comment('{{ post.id }}')" >Comment</button>
                <hr id="line1_{{post.id}}" style="display: none;">
                <textarea class="form-control mb-2" id="comment_box_{{post.id}}" name="comment" style="display:none;" required></textarea>
                <button id="comment_button_{{post.id}}" class="btn btn-dark" style="display:none;">Comment</button></br>

                <hr id="line2">
                <div id="comment_list_{{post.id}}">
                    {%for comment in comments%}
                        {%if comment in post.comments.all%}
                        <div>
                            <p style="margin-left: 1cm;">{{comment.user}} - {{comment.content}}</p>
                        </div>
                        {%endif%}
                    {%endfor%}
                </div>

Это функция Javascript

    function comment(id) {
    document.querySelector(`#comment_box_${id}`).style.display = 'block';
    document.querySelector(`#comment_button_${id}`).style.display = 'block';
    document.querySelector(`#line1_${id}`).style.display = 'block';
    document.querySelector(`#comment_${id}`).style.display = 'none';
    document.querySelector(`#comment_box_${id}`).value=""
    
    document.querySelector(`#comment_button_${id}`).addEventListener('click', () => {
        fetch('/comment/' + id, {
            method: 'PUT',
            body: JSON.stringify({
                post: document.querySelector(`#comment_box_${id}`).value
            })
          })
          .then((res) => res.json())
          .then((res) =>{
            
            var com = document.createElement('div');
            com.innerHTML = `<p style="margin-left: 1cm;">${res.user} - ${res.content}</p> `
            document.getElementById(`comment_list_${id}`).appendChild(com);
    
            document.querySelector(`#comment_box_${id}`).style.display = 'none';
            document.querySelector(`#comment_button_${id}`).style.display = 'none';
            document.querySelector(`#line1_${id}`).style.display = 'none';
            document.querySelector(`#comment_${id}`).style.display = 'initial';
            document.querySelector(`#comment_box_${id}`).value=""

          })  
    });
}

А это функция Python

@csrf_exempt
@login_required(login_url='login')
def comment(request, post_id):
    comment=Comment()
    if request.method == "PUT":
        data = json.loads(request.body)
        if data.get("post") is not None:    
            comment.content = data["post"]
            comment.user = request.user
            comment.save()
            post = Post.objects.get(id=post_id)
            post.comments.add(comment)
            post.save
        return JsonResponse({'user': request.user.username, 'content': data["post"], "status": 201})

Я пробовал удалить слушателя событий после завершения действия и очистить переменную "com", но ничего из этого не помогло. Как я могу исправить эту ошибку?

Вернуться на верх