After an Ajax request, the old content remains, how can I fix this and what am I doing wrong?

Question

Django

I am new to JS, so when I want to add a comment on the site using the form, the following question arose, why such an error: I want to update the comments section using an AJAX request, everything is ok - it is updated, but it only turns out that two templates are loaded on one page ( one is old, with text in the form of a comment), and the second is new. Moreover, if you enter new data in a new form (which is loaded with the second template), then everything works as it should (comments are reflected only at the bottom, as it should be. And nothing extra appears), but the first form (basic) along with the content does not go anywhere removed. It turns out that I have two posts on the page, along with comments, how can I fix this? Tried different ways, and delete, and hide, nothing helped.
Sample:

<div id="zone_comm">
{% for comment in articles.comments.all %}
        <div>{{ comment.created_date }}</div>
        <strong>{{ comment.author }}</strong>
        <p>{{ comment.text|linebreaks }}</p>
    </div>
{% empty %}
<p>Нет комментариев, будьте первым, кто оставит комментарий :)</p>
<button id='add'>
<p class="btn btn-default">Добавьте комментарий</p>
</button>
{% endfor %}

JS

$(document).ready(function(){
        var $myForm = $('.my-ajax-form1')
        $myForm.submit(function(event){
            event.preventDefault();
            var $formData = $(this).serialize();
            var $thisURL = $myForm.attr('data-url') || window.location.href; 
            $.ajax({
                method: "POST",
                url: $thisURL,
                data: $formData,
                success: handleFormSuccess,
                error: handleFormError,
            })
        })
        
    
        function handleFormSuccess(data, textStatus, jqXHR){
            console.log(data)
            console.log(textStatus)
            console.log(jqXHR)
            $('#zone_comm').html(data);
        }
    
        function handleFormError(jqXHR, textStatus, errorThrown){
            console.log(jqXHR)
            console.log(textStatus)
            console.log(errorThrown)
        }
    })

I would like to know where I am wrong and what should I pay attention to

Answer 1

What is returned in the server response?
Full html version of the page?
I suspect you need something like

var comments = $(data).find('#zone_comm').html();
$('#zone_comm').html(comments);

Answer 2

Wow, typical mistake, you have server side rendering (from a template) and browser side rendering (javascript) mixed up.
The easiest way out is to keep the id of the posts, and update (and add ) them via ajax.

<div id="zone_comm">
{% for comment in articles.comments.all %}
  <div id="comment-{{ comment.id }}">
        <div>{{ comment.created_date }}</div>
        <strong>{{ comment.author }}</strong>
        <p>{{ comment.text|linebreaks }}</p>
  </div>
{% endfor %}
</div>

And JS (note the template is based on ECMA2015 literals - in back quotes!)

....
function handleFormSuccess(data, textStatus, jqXHR){
            $( "#zone_comm" ).append(
`
  <div id="comment-${data.id }">
        <div>${data.created_date}</div>
        <strong>${data.author}</strong>
        <p>${data.text}</p>
  </div>
`
            );
        }

Or, in general, add them completely through ajax...