django - mttp comments problem in comment replying

Question

everything works great but the problem is each time i try to reply to a comment it just creates a new individual comment instead

im trying to capture the id of the comment which it does but i cant seem to connect it with the replied on comment so it just appears as a new comment

im following a tutorial btw

hmtl

    <div class="row justify-content-md-center pt-5">
      <div class="col-8"><h1>{{posts.title}}</h1></div>
        <div class="col-8"><p>{{posts.content|linebreaks}}</p></div><br>
          <div class="col-md-8">
            <hr>
            {% with comments.count as total_comments %}
              <legend class="border-bottom mb-4">{{total_comments}} comment{{total_comments|pluralize }}</legend>
            {% endwith %}

            <div class="col-8">
                {% load mptt_tags %}

                <div>
                  {% recursetree comments %}
                  <div id="{{node.id}}">
                    <strong>{{ node.author }}: </strong>{{ node.content }}
                    <div><sup class="text-muted">{{node.publish_date|date:"f, j.M/y"}}</sup>
                    </div>
                  </div>
                  <button style="margin-bottom: 10px;" class="btn btn-outline-dark btn-sm" onclick="myFunction( {{ node.id }} )">Reply</button>
                   
                  {% if not node.is_leaf_node %}
                    <div class="children" style="padding-left:30px; margin-bottom:20px;">
                      {{ children }}
                    </div>
                  {% endif %}

                  {% endrecursetree %} 
                </div>
                
              </div>
              <hr>   
              <form action="{% url 'blog:comment-create' object.id %}" method="POST"> 
                {% csrf_token %}
                <fieldset class="col-12 form-group">
                    <legend class="border-bottom mb-4">New Comment</legend>
                    {{ form|crispy }}
                </fieldset>
                <div class="form-group mb-4">
                  <button class="btn btn-dark btn-lg mt-1" type="submit">Publish</button>
                </div>
              </form>
          </div>    
        </div>
      </div>
    </div>
  </div>
  <script>

    function formExit(){
      document.getElementById("newForm").remove();
    }

    function myFunction(id){

      if(document.contains(document.getElementById("newForm"))){
        document.getElementById("newForm").remove();
      }

      var a = document.getElementById(id);
      a.insertAdjacentHTML('afterend',
      '<form id="newForm" class="form-inser py-2" action="/blog/1/create" method="POST"> 
        <input type="hidden" name="csrfmiddlewaretoken" value="aUjci3flshUraoT77dr6OV0zLTQDbCba8wsXg7IsSQ37Gp1UAIYKbEtdVQ5DmvV4">
        <fieldset class="col-12 form-group">
          <div id="div_id_content" class="form-group"> 
            <div class=""> 
              <textarea name="content" cols="50" rows="4" class="form-control textarea form-control" placeholder="Comment here !" required="" id="id_content"></textarea> 
            </div> 
          </div> 
          <div id="div_id_parent" class="form-group"> 
            <div class=""> 
            <select name="parent" class="d-none select form-control" id="id_parentt"> 
              <option value=" '+ id +' " selected=" '+ id +' ">---------</option> 
            </select> 
            </div> 
          </div>
        </fieldset>
          <div class="form-group mb-4">
            <button class="btn btn-dark btn-sm mt-1" type="submit">Publish</button>
            <button class="btn btn-outline-danger btn-sm mt-1" onclick="formExit()" type="button">Cancel</button>
        </div>
      </form>'
      );}
    $('#myForm').trigger("reset");
  </script>

forms

class AddCommentForm(forms.ModelForm):
    parent = TreeNodeChoiceField(queryset=Comment.objects.all())
    # parent.empty_label = 'New Comment'

    content = forms.CharField(label ="", widget = forms.Textarea( 
    attrs ={ 
        'class':'form-control', 
        'placeholder':'Comment here !', 
        'rows':4, 
        'cols':50
    })) 

    def __init__(self, *arg, **kwargs):
        super().__init__(*arg, **kwargs)
        self.fields['parent'].label = ''
        self.fields['parent'].required = False
        self.fields['parent'].widget.attrs.update({'class': 'd-none'})

    class Meta: 
        model = Comment 
        fields = ['content', 'parent']
   

view

class CommentCreateView(CreateView):
    model = Comment
    fields = ['content']
    template_name = 'blog/post_detail.html'
  
    def form_valid(self, form): 
        #saves user to comment
        form.instance.author = self.request.user
        #saves comment to the post
        post = Post.objects.get(pk=self.kwargs.get('pk'))
        self.object = form.save(commit=False)
        self.object.post = post
        # self.object.save()
        return super().form_valid(form)

question from:https://stackoverflow.com/questions/65944674/mttp-comments-problem-in-comment-replying

Answer 1

Waitting for answers