JSFiddle - React, Tailwind, and code Playground

JavaScript

$('.comment_add').click(function(event){
      var data_id = $(event.target).prev().attr("data-id");

      value_after = "<div class='add_form_div'><span class='x'>X</span><br/><textarea class='add_textarea'>				</textarea><br/>\
      <span class='submit'>Ответить</span></div>\
      "

      if($(event.target).parent().children().children().is('textarea') == false){
          $(event.target).after(value_after)
      }  
  

    //hide 
    $(this).hide()
    //функция добавляет пришедшее от сервера
        function answer(data){
          console.log(data.descendant_id);
          console.log(data);
          $(".comment").each(function(index, element){
            if($(element).attr('data-id') == data.ancestor_id){
              margin = $(element).parent().css("margin-left");
              margin = parseInt(margin, 10)
              margin = margin + 10
              $(element).parent().after(
                                '<div style="margin-left: %spx;">\
                                <p class="comment" data-id="%s">%s</p>\
                                <span class="comment_add">Ответить</span>\
                                </div>'.format(margin, data.descendant_id, data.message)
                              )
              console.log('равен');
            }
          });
        }
    $('.submit').click(function(event){
       
       $(event.target).parent().parent().find('.comment_add').show();
       var value_textarea = $(event.target).parent().find('textarea').val();
       //it is ajax
       $.post(
        "/addcomment/",
        {
          "textarea" : value_textarea,
          "csrfmiddlewaretoken" : csrftoken,
          "data_id" : data_id
        },
        answer
        );
       $(event.target).parent().find('.add_form_div').remove()
        

    })