Javascript Repeating Append Textarea Values issue -

i have created form 4 textareas , submit button. reason of form, when press submit button append value (text) have insert in textareas inside div.

when press submit button can see text have insert in 4 textareas when press submit button again append 4 textareas , on.

what happen whenever press submit button show 4 textareas(with updated text) without appending 4 textareas.

var firstcontent = document.getelementbyid("first-content");  var secondcontent = document.getelementbyid("second-content");  var thirdcontent = document.getelementbyid("third-content");  var fourthcontent = document.getelementbyid("fourth-content");  var customcontainer = document.getelementbyid("c-content");  var submitbtn = document.getelementbyid("c-btn");      function submitcustomform() {      var celementone = document.createelement("p");    celementone.innerhtml = firstcontent.value;    customcontainer.append(celementone);      var celementtwo = document.createelement("p");    celementtwo.innerhtml = secondcontent.value;    customcontainer.append(celementtwo);      var celementthree = document.createelement("p");    celementthree.innerhtml = thirdcontent.value;    customcontainer.append(celementthree);      var celementfour = document.createelement("p");    celementfour.innerhtml = fourthcontent.value;    customcontainer.append(celementfour);  }    submitbtn.addeventlistener("click", submitcustomform);

<div class="container">    <form action="#" method="post" onsubmit="return false">      <div class="content-container">        <label>first content          <label>            <textarea id="first-content" class="content-area" placeholder="insert content here"></textarea>      </div>      <hr>      <div class="content-container">        <label>second content          <label>            <textarea id="second-content" class="content-area" placeholder="insert content here"></textarea>      </div>      <hr>      <div class="content-container">        <label>third content          <label>            <textarea id="third-content" class="content-area" placeholder="insert content here"></textarea>      </div>      <hr>      <div class="content-container">        <label>fourth content          <label>            <textarea id="fourth-content" class="content-area" placeholder="insert content here"></textarea>      </div>          <button id="c-btn">submit</button>        <div id="c-content">        </div>    </form>  </div>

var customcontainer = document.getelementbyid("c-content");  var submitbtn = document.getelementbyid("c-btn");      function submitcustomform() {    //clear content    customcontainer.innerhtml = "";    var txtid = ["first", "second", "third", "fourth"];    (var = 0; < txtid.length; i++) {      appendtxt("" + txtid[i] + "-content", customcontainer);    }    }    function appendtxt(content, parent) {    var contentvalue = document.getelementbyid("" + content + "").value;    if (contentvalue.length > 0) {      var htmltxt = document.createelement("p");      htmltxt.innerhtml = contentvalue;      parent.append(htmltxt);      }    }    submitbtn.addeventlistener("click", submitcustomform);

<div class="container">    <form action="#" method="post" onsubmit="return false">      <div class="content-container">        <label>first content          <label>            <textarea id="first-content" class="content-area" placeholder="insert content here"></textarea>      </div>      <hr>      <div class="content-container">        <label>second content          <label>            <textarea id="second-content" class="content-area" placeholder="insert content here"></textarea>      </div>      <hr>      <div class="content-container">        <label>third content          <label>            <textarea id="third-content" class="content-area" placeholder="insert content here"></textarea>      </div>      <hr>      <div class="content-container">        <label>fourth content          <label>            <textarea id="fourth-content" class="content-area" placeholder="insert content here"></textarea>      </div>          <button id="c-btn">submit</button>        <div id="c-content">        </div>    </form>  </div>