When I append an element it does it twice rather than once

Question

I am trying to make multiple comment boxes for a website. The first click to create the text area and submit button works fine. However when I click another it appends the text area and submit button twice - creating two text areas and submit buttons and then three and so on..

If you go to https://alexpd93.github.io/FAC-Website/ and click on various comment buttons it should make more sense.

I would like it so that each time I click on the comment button, it only creates one text area for each section.

How can I fix this?

function addComment(element) {
  const boxContainer = element.parentNode.parentNode.parentNode;
  const commentContainer = element.parentNode;
  commentContainer.classList.add("comment-container-after-click");

  const commentBox = document.createElement("textarea");
  commentBox.classList.add("comment-box-after-click");
  commentBox.placeholder = "What are your thoughts?";
  commentBox.innerHTML = "";

  const submitComment = document.createElement("button");
  submitComment.classList.add("submit-comment-after-click");
  submitComment.innerHTML = "Comment";

  commentContainer.append(commentBox, submitComment);

  submitComment.onclick = function submitComment() {
    let comment = commentBox.value;
    const newComments = document.createElement("p");
    boxContainer.appendChild(newComments);
    newComments.innerHTML = `${comment}`;
    commentBox.value = "";
  };
}

function comment(event) {
  const commentButton = event.target;
  commentButton.style.display = "none";
  const commentIcon = document.getElementsByClassName("comment-icon");

  const iconArray = Array.from(commentIcon);
  iconArray.forEach((icon) => {
    if (icon.nextElementSibling.style.display === "none") {
      icon.style.display = "none";
      addComment(commentButton);
    }
  });
}

<div class="comments-container" id="comments">
    <img id="commentIcon" class="comment-icon" src="Images/Comment.png" alt="comment icon">
<button class="comment-button" id="commentButton" onclick="comment(event)" > Comment </button>
</div>

Answer 1

After playing around with the website I believe I understood the problem. You are calling addComment() for all elements with class comment-icon. And due to your (tbh) little bit weird handling of addComment() this adds a comment to every single one of this elements.

I've corrected the error below and marked my changes with comments.

function addComment(element) {
  const boxContainer = element.parentNode.parentNode.parentNode;
  const commentContainer = element.parentNode;
  commentContainer.classList.add("comment-container-after-click");

  const commentBox = document.createElement("textarea");
  commentBox.classList.add("comment-box-after-click");
  commentBox.placeholder = "What are your thoughts?";
  commentBox.innerHTML = "";

  const submitComment = document.createElement("button");
  submitComment.classList.add("submit-comment-after-click");
  submitComment.innerHTML = "Comment";

  commentContainer.append(commentBox, submitComment);

  submitComment.onclick = function submitComment() {
    let comment = commentBox.value;
    const newComments = document.createElement("p");
    // why append to the box container? Then all comments from different textareas will be merged
    // boxContainer.appendChild(newComments);
    commentContainer.appendChild(newComments);
    newComments.innerHTML = `${comment}`;
    commentBox.value = "";
  };
}

function comment(event) {
  const commentButton = event.target;
  commentButton.style.display = "none";
  const commentIcon = document.getElementsByClassName("comment-icon");

  // add the comment once not to every comment box available
  addComment(commentButton);

  const iconArray = Array.from(commentIcon);
  iconArray.forEach((icon) => {
    if (icon.nextElementSibling.style.display === "none") {
      icon.style.display = "none";
      // this causes that the comment is added multiple times
      // addComment(commentButton);
    }
  });
}

<div div="all-comments">
  <div class="comments-container" id="comments">
    <img id="commentIcon" class="comment-icon" src="https://dummyimage.com/100x100/000/fff" alt="comment icon">
    <button class="comment-button" id="commentButton" onclick="comment(event)"> Comment </button>
  </div>
  <div class="comments-container" id="comments">
    <img id="commentIcon" class="comment-icon" src="https://dummyimage.com/100x100/000/fff" alt="comment icon">
    <button class="comment-button" id="commentButton" onclick="comment(event)"> Comment </button>
  </div>
  <div class="comments-container" id="comments">
    <img id="commentIcon" class="comment-icon" src="https://dummyimage.com/100x100/000/fff" alt="comment icon">
    <button class="comment-button" id="commentButton" onclick="comment(event)"> Comment </button>
  </div>
</div>