Rendering forms via Javascript

[itssandeep]

trafficstars

Hi. Currently the template I've written will generate one editor at the top which serves its purpose, however, when I click on a "Reply" button on the page I want another markdown editor form to be appended below.

I've currently tried cloning the form above and changing the ids to avoid conflicts however this renders the form unusable altogether (cannot type, button clicks on the editor do nothing). If I include two forms in the template (so not generated by Javascript) any buttons I click on the second editor will only ever make changes to the 1st editor.

I currently suspect most of these issues are due to the handlers on the Javascript files provided and was wondering if there was a potential workaround without having to change the JS files?

Below is the code in the HTML template which renders the current editor at the top of the page (works correctly)

<form method="POST" id="comment-post-form" class="comment-post-form">
    {% csrf_token %}
    {% for field in comment_form %}
        <p class="{{field.name}}-container">
            {{ field }}
        </p>
    {% endfor %}
    <button name="comment_submit" type="submit">Post Comment</button>
</form>

Below is the JS function which when the reply button is pressed is called. It should append the editor to div tag provided, whilst adding a user mention preloaded into the editor. The code below was from my attempt of cloning the editor already on the page using jQuery.

function generateReplyForm(commentIdAppendTo) {
    const userReplyTo = $(`#${commentIdAppendTo}`).children('.comment-author-username').html();

    let newForm = $('#comment-post-form').clone().removeAttr('id');
    newForm.find('.ace_content').text(`@${userReplyTo}`);
    newForm.find('#martor-content').attr('id', `#martor-content${commentIdAppendTo}`);
    newForm.find('#id_content').attr('id', `#id_content${commentIdAppendTo}`);
    $(`#${commentIdAppendTo}`).append(newForm);
}