title: Update an Object Array with user input & then display the updated array in JavaScript
body: <p>I have an array with an item already inside that displays when you first open the page. I've created a form that takes user input data (name + comment) and pushes it to the array on button click. I want the updated array to display its new content without duplicating what is already displayed.</p>
  <p>Eg: On page load, display existing item. On button submit, display new item + existing item. There should be 2 items displaying now. On button submit again, display new item + 2 existing items. There should be 3 items displaying now.</p>
  <p>I have tried calling the function (<code>generateCommentRows()</code>) that displays the array content, but, this just displays content again. I've thought about creating a function that clears the comment area and then calls (<code>generateCommentRows()</code>) again, but, I would prefer to learn how to update it.</p>
  <p>I know it must be a simple issue but I can't seem to think of it right now.</p>
  <p>The array:</p>
  <pre><code>    const commentsArray = [
    {
      name: &quot;Barack Obama&quot;,
      pfp: &quot;./assets/images/image.jpg&quot;,
      date: &quot;02/17/2021&quot;,
      comment:
        &quot;blah blah&quot;,
    }
  ];
  </code></pre>
  <p>Displaying the array content:</p>
  <pre><code>const generateCommentsRows = () =&gt; {
    commentsArray.forEach((event) =&gt; {
      const commentContainer = document.createElement(&quot;article&quot;);
      commentContainer.classList.add(&quot;comments__area__lower__row&quot;);
  
      const nameEl = document.createElement(&quot;p&quot;);
      nameEl.classList.add(&quot;comments__area__lower__row__name&quot;);
      nameEl.innerText = event.name;
  
      const pfpEl = document.createElement(&quot;img&quot;);
      pfpEl.classList.add(&quot;comments__area__lower__row__pfp&quot;);
      pfpEl.src = event.pfp;
  
      const dateEl = document.createElement(&quot;p&quot;);
      dateEl.classList.add(&quot;comments__area__lower__row__date&quot;);
      dateEl.innerText = event.date;
  
      const commentsEl = document.createElement(&quot;p&quot;);
      commentsEl.classList.add(&quot;comments__area__lower__row__comments&quot;);
      commentsEl.innerText = event.comment;
  
      commentContainer.appendChild(pfpEl);
      commentContainer.appendChild(nameEl);
      commentContainer.appendChild(dateEl);
      commentContainer.appendChild(commentsEl);
      const lowerCommentsArea = document.querySelector(&quot;.comments__area__lower&quot;);
  
      lowerCommentsArea.appendChild(commentContainer);
    });
  };
  generateCommentsRows();
  </code></pre>
  <p>Input form to array:</p>
  <pre><code>const pushData = (event) =&gt; {
    let comments = {
      name: document.getElementById(&quot;name&quot;).value,
      pfp: &quot;./assets/images/image.jpg&quot;,
      date: Date.now(),
      comment: document.getElementById(&quot;commentText&quot;).value,
    };
    commentsArray.unshift(comments);
  };
  
  let myBtn = document.getElementById(&quot;submitBtn&quot;);
  myBtn.onclick = function () {
    pushData();
  };
  </code></pre>
  <p><em>This code is displayed in the order it's written in my .js file.</em></p>
  <p>UPDATE:
  I managed to get the intended outcome by clearing the comment area and then simply recalling the function that displays the array.
  Again, however, if there's a way to dynamically update the array without recalling the function, that would be great to learn.</p>