Form output written to generated divs using JS?

Basically you type something in the first text area form, click post and a div is generated below with a sequenced number. The text from the comment box should print inside the generated div but for now outputs to the second text area for the sake of function. I'm having trouble with text output to the new div Elements. I've tried using innerHTML to create a new text area on each new div but the text output doesn't generate with the new div elements. I've also tried appending the post text to the post numbers on the left but again it fails to generate. I'm making a message board/chan forum if that helps. thanks in advanced

function addtext() {
   var newtext = document.myform.inputtext.value;
   document.myform.outputtext.value += newtext;
}

function addElement() {

   var ni = document.getElementById('myDiv');

   var numi = document.getElementById('theValue');

   var num = (document.getElementById('theValue').value - 1) + 2;

   numi.value = num;

   var newdiv = document.createElement('div');

   var divIdName = 'Post#' + num;

   newdiv.setAttribute('id', divIdName);

   newdiv.innerHTML = (divIdName) + "";
   ni.appendChild(newdiv);
}

#LL {
   position: relative
}

div {
   display: block;
   color: black;
   border-radius: 19px;
   background: linear-gradient(white, teal, black);
   padding: 20px;
   width: 1440px;
   height: 100px;
   border: 10px solid #fff;
}

#fs {
   border-radius: 12px;
   background: linear-gradient(white, teal, white);
   ;
}

.clearfix {
   overflow: auto;
}

#textbox {
   height: 100px;
   width: 1440px;
   border-radius: 10px;
   background: ;
}

#post {
   border-radius: 15px;
   position: relative;
   left: 1340px;
   color: black;
}

<body>
   <header>
      <script>
         </script>
   </header>
<fieldset id="fs">
   <input type="hidden" value="0" id="theValue" />
   <legend id=LL>▼
   </legend>
   <form name="myform">
      <textarea id="textbox" type="text" size="50" name="inputtext" />
      </textarea>
      <button id="post" onClick="addtext()">
         <a value="Add New Text" href="javascript:;" onclick="addElement()">
      Post Comment
   </a>
      </button>
</fieldset>

<div id="myDiv">
   <textarea name=outputtext></textarea>
</div>
</form>
<p>TEXT ENTRY DOESN'T WORK YET</p>
</body>

Solution

You are never putting textarea value inside new created div. You have this inside your addElement() function. Which just simply put div id name you are creating

newdiv.innerHTML = (divIdName) + "";

If you want to textarea content inside that div use this

newdiv.innerHTML = (divIdName) + document.myform.inputtext.value;

function addtext() {
   var newtext = document.myform.inputtext.value;
   document.myform.outputtext.value += newtext;
}

function addElement() {

   var ni = document.getElementById('myDiv');

   var numi = document.getElementById('theValue');

   var num = (document.getElementById('theValue').value - 1) + 2;

   numi.value = num;

   var newdiv = document.createElement('div');

   var divIdName = 'Post#' + num;

   newdiv.setAttribute('id', divIdName);

   newdiv.innerHTML = (divIdName) + document.myform.inputtext.value;
  
   ni.appendChild(newdiv);
}

#LL {
   position: relative
}

div {
   display: block;
   color: black;
   border-radius: 19px;
   background: linear-gradient(white, teal, black);
   padding: 20px;
   width: 1440px;
   height: 100px;
   border: 10px solid #fff;
}

#fs {
   border-radius: 12px;
   background: linear-gradient(white, teal, white);
   ;
}

.clearfix {
   overflow: auto;
}

#textbox {
   height: 100px;
   width: 1440px;
   border-radius: 10px;
   background: ;
}

#post {
   border-radius: 15px;
   position: relative;
   left: 1340px;
   color: black;
}

<body>
   <header>
      <script>
         </script>
   </header>
<fieldset id="fs">
   <input type="hidden" value="0" id="theValue" />
   <legend id=LL>▼
   </legend>
   <form name="myform">
      <textarea id="textbox" type="text" size="50" name="inputtext" />
      </textarea>
      <button id="post" onClick="addtext()">
         <a value="Add New Text" href="javascript:;" onclick="addElement()">
      Post Comment
   </a>
      </button>
</fieldset>

<div id="myDiv">
   <textarea name=outputtext></textarea>
</div>
</form>
<p>TEXT ENTRY DOESN'T WORK YET</p>
</body>

You should also try to remove horizontal scroll bar from you any pages. Horizontal scroll on a website are not considered user friendly because user has to drag it across the screen(Normally mouse scroll doesn't control horizontal scrolls)