Using Js To Render Django Form

I'm learning to utilize pure JS in Django projects. Being a server-side developer the concepts are relatively new for me, so need a hand. Imagine a form where a user can post text

Solution 1:

Hope it helps:

var formTemplate = document.querySelector('#form-template form');
var idInput = document.getElementById('id-input');

functiontoggleReply(e) {
  if (!formTemplate) return;

  e.target.parentNode.insertBefore(formTemplate, e.target);
  idInput.value = e.target.getAttribute('data-id');
};

Array.from(document.querySelectorAll('button.reply'))
  .forEach(btn => btn.onclick = toggleReply)

form + .reply {
  display: none;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><divid="form-template"style="display: none;"><formaction=""method="POST"enctype="multipart/form-data"><inputid="id-input"type="hidden"name="id"value=""><divclass="form-group"><labelfor="reply">Reply:</label><textareaclass="form-control"type="text"name="text"></textarea></div><inputtype="submit"class="btn btn-default pull-right"value="submit"></form></div><divclass="container"><divclass="list-group"><divclass="panel panel-default"><divclass="panel-heading"><h3class="panel-title">Comment title</h3></div><divclass="panel-body">
        Comment content
      </div><divclass="panel-footer clearfix"><buttonclass="reply btn btn-default pull-right"type="button"data-id="24">Reply</button></div></div><divclass="panel panel-default"><divclass="panel-heading"><h3class="panel-title">Comment title</h3></div><divclass="panel-body">
        Comment content
      </div><divclass="panel-footer clearfix"><buttonclass="reply btn btn-default pull-right"type="button"data-id="25">Reply</button></div></div></div></div>