removing multiple buttons in a form and replacing it with text box on click in Javascript

Question

So after a lot of hit and trial I have been able to add a textarea when the reply button is clicked in a form. What I have been unable to do is that once a particular reply button is clicked in a form only that particular form's buttons disappear and get replaced with a text area only. Right now the buttons disappear but the text area never appears in their place. Hence requirements are;

1. When the reply button is clicked ALL 3 buttons should disappear only for that particular form and in their place a textarea should appear. The save and delete button should not do anything as I will add Django separately later on for their functionality.

2. If another reply button in a different form is clicked then (1) should be executed for that form while the previous form which had (1) executed in it should go back to its starting state i.e. Have no text area and only the 3 buttons in it's place.

3. The solution must be in Vanilla JS only. Please do not provide solution in jQuery or any other library. Beginner JS here hence jQuery is out of my reach.

My code is:

// Select all the reply buttons...
var replyBtns = document.querySelectorAll('button.rep');
// Attach an event listener to each...
for (var i = 0; i < replyBtns.length; i++) {
  replyBtns[i].addEventListener('click', function(e) {
    // Prevent submitting the form
    e.preventDefault();
    //remove save and delete buttons from that form only
    this.parentNode.parentNode.removeChild(this.parentNode);
    // Remove the textarea from the page if it exists
    var textarea = document.getElementById("reply-message");
    if (textarea) {
      textarea.parentNode.removeChild(textarea);
    }
    // Create the textarea and insert it in the form, right before the reply button
    var replyBox = document.createElement('textarea');
    replyBox.setAttribute('id', 'reply-message');
    this.parentNode.insertBefore(replyBox, this);
  }, false);
}

textarea#reply-message {
  display: block;
}

<div class="margin clb">
  <h2>comment 1</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>
  </form>

  <h2>comment 2</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>

  </form>

  <h2>comment 3</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>

  </form>

  <h2>comment 4</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>

  </form>

  <h2>comment 5</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>

  </form>
</div>

Answer 1

this.parentNode.parentNode.removeChild(this.parentNode);

Here you remove the <form> from the DOM.

this.parentNode.insertBefore(replyBox, this);

Here you add the reply box as a child of the <form>, before the clicked <button>. But the entire <form> has been removed, so the reply box never appears.

Also, don't use duplicate IDs. It'll cause confusing problems down the road.

Instead of manually adding and removing elements from the DOM, you can add a class to the <form> and key the visibility of the buttons and reply box off of that:

var replyBtns = document.querySelectorAll('button.rep');
for (var i = 0; i < replyBtns.length; i++) {
  replyBtns[i].addEventListener('click', function(e) {
    e.preventDefault();

    // Remove the 'replying' class from all forms on the page...
    document.querySelectorAll('form')
      .forEach(e => e.classList.remove('replying'));

    // ...and add it to the specific form that was clicked
    e.target.closest('form').classList.add('replying');
  }, false);
}

/* reply-message textboxes are hidden by default */
textarea.reply-message {
  display: none;
}

/* but they're visible in 'replying' forms */
form.replying textarea.reply-message {
  display: block;
}

/* 'replying' form buttons are hidden */
form.replying button {
  display: none;
}

<div class="margin clb">
  <h2>comment 1</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>

  <h2>comment 2</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>

  <h2>comment 3</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>

  <h2>comment 4</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>

  <h2>comment 5</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>
</div>