Q:

one Post button, each click gives different result (javascript)

I am trying to make a simple comment post for learning purpose (like the pic)

How do I make the post button post the comment to new input box every time I click. In other words, every time I write a comment in text area and click post button, each of these comments should go to each input box. 
ex: I write "i love this" in the text area and click post, that writing is going to display in comment class(0). The next comment "xyz" and click post is going to class(1) etc. So far I only know  how to display to one input box.
Here is my code so far:

function postcomment(){
  var x = document.getElementById("entercomment").innerHTML;
  document.getElementsByClassName("comment")[0].value = x;
}
body{
background-color: cyan;
}

#picgoeshere{
  border: 5px solid grey;
  height: 500px;
  width:900px;
   margin: 0 auto; 
}

#picture{
  height: 500px;
  width:900px;
}

#displaycomment{
   border: 3px solid grey; 
   height:250px;
   width:800px;
   margin: 0 auto;
   margin: top:50%;
} 

.comment{
 height: 41.5px;
 width: 800px;
 border: 0;
}

#typecomment{
   border: 3px solid grey; 
   height:100px;
   width:800px;
   margin: 0 auto;
}
#entercomment{
     height:100px;
     width:700px;
}

#submitbutton{
  
  border: 1px solid grey;
  background-color: green;
  height: 100px;
  width: 100.9px;
  position: absolute;
  top: ;
  left: 65.7%;
}
</!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="learnjs.css">
 <title></title>
</head>
<body>
<div id="everything">
  <div id="picgoeshere">
  <img src="./images/bisping.jpg" id="picture">
  </div>

   <div id="displaycomment">
     <input type="text" class="comment"></br>
     <input type="text" class="comment"></br> 
     <input type="text" class="comment"></br> 
     <input type="text" class="comment"></br> 
     <input type="text" class="comment"></br> 
     <input type="text" class="comment"></br> 

   </div>

  <div id="typecomment">
   <textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>
     <button id="submitbutton" onclick="postcomment()"> Post</button>
  </div>

</div>

<script src = "learn.js"></script>
</body>
</html>

A:

You could make a counter variable and use it to reference each of the comment elements, then add 1 each time the function is called. For example:

var counter = 0;

function postcomment() {

  var x = document.getElementById("entercomment").value;

  document.getElementsByClassName("comment")[counter].value = x;
  
  counter++;

}
body {
  background-color: cyan;
}
#picgoeshere {
  border: 5px solid grey;
  height: 500px;
  width: 900px;
  margin: 0 auto;
}
#picture {
  height: 500px;
  width: 900px;
}
#displaycomment {
  border: 3px solid grey;
  height: 250px;
  width: 800px;
  margin: 0 auto;
  margin: top: 50%;
}
.comment {
  height: 41.5px;
  width: 800px;
  border: 0;
}
#typecomment {
  border: 3px solid grey;
  height: 100px;
  width: 800px;
  margin: 0 auto;
}
#entercomment {
  height: 100px;
  width: 700px;
}
#submitbutton {
  border: 1px solid grey;
  background-color: green;
  height: 100px;
  width: 100.9px;
  position: absolute;
  top: ;
  left: 65.7%;
}
</!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="learnjs.css">
  <title></title>
</head>

<body>
  <div id="everything">


    <div id="picgoeshere">

      <img src="./images/bisping.jpg" id="picture">
    </div>


    <div id="displaycomment">
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>


    </div>

    <div id="typecomment">

      <textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>

      <button id="submitbutton" onclick="postcomment()">Post</button>

    </div>



  </div>


  <script src="learn.js"></script>

</body>

</html>

