How to get comments to display under thread

Question

Im trying to create a forum where users can create threads by filling out form with name and message and people can comment on each thread post by clicking the comments button (more) which opens up all the comments underneath the thread post and then submit a comment form.

Currently I am using a table to display all thread posts and comments, the problem is when I click the more comments button it opens comments to the side in a new table columns, but i want it to open underneath the thread post. I have tried placing comments in new table row underneath but that does not work. So all comments will need to be displayed underneath the thread post and under all the comments will be a form, which a user can fill out to submit a comment.

Here is what it looks like right now: https://i.sstatic.net/3oJlP.jpg

function comment() {
  var table = document.getElementById("comments");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var name = document.getElementById("name").value;
  var message = document.getElementById("message").value;
  cell1.innerHTML = name;
  cell2.innerHTML = message;
}

function add() {
  var table = document.getElementById("masterTable");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var name = document.getElementById("name").value;
  var message = document.getElementById("message").value;
  cell1.innerHTML = name;
  cell2.innerHTML = message;
}



function toggle_visibility(id) {
  var btn = document.getElementById('commentBtn');

  var e = document.getElementById(id);
  if (e.style.display == 'block') {
    e.style.display = 'none';
    btn.innerHTML = "More";
  } else {
    e.style.display = 'block';
    document.getElementById("commentBtn").value = "Less";
    btn.innerHTML = "Less";
  }
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<h1>Test</h1>
<table id="masterTable">
  <tr>
    <th>Name</th>
    <th>Message</th>
    <th>Comments</th>
  </tr>
  <tr>
    <td>Tiago</td>
    <td>Hello how are you?</td>
    <td><button id="commentBtn" onclick="toggle_visibility('comments');">More</button></td>
    <td id="comments" style="display: none;">
      <p>TestComment1</p>
      <p>TestComment2</p>
      <form>
        <h4>Submit a comment</h4>
        <input type="text" id="name" placeholder="name">
        <input type="text" id="message" placeholder="message">
        <button type="submit" onClick='comment()' id='button'>Submit</button>
      </form>
    </td>
  </tr>
  <tr>
    <td>Comment Name should display here</td>
    <td>Comment message should display here</td>
    <td></td>
  </tr>
</table>
</div>
<br/><br/>
<form>
  <h2>Submit a message</h2>
  <input type="text" id="name" placeholder="name">
  <input type="text" id="message" placeholder="message">
  <button type="submit" onClick='add()' id='button'>Submit</button>
</form>

So the result I need would be, if user clicks more button then all the comments would display underneath the thread post instead of on the right side of the post.

Answer 1

you did copy/paste the same function & form for both message and comment which cannot work properly.

if in one case you add a row, in the other, you want to add text in a container.

You need to create a different HTML structure, you can add a row to a table , but for the comments, a div with text in it is enough.

below is an example from your code.

first i added a container to receive comment on the top of the form, i renamed ids so they are only one.

for the demo , i added return false; on onclick for the button , remove them before use.

function comment() {
  var name = document.getElementById("name1").value;
  var message = document.getElementById("message1").value;
  var newDIV = document.createElement("blockquote"); // create the tags you think most appropriate
  var newp1 = document.createElement("cite");
  var newp2 = document.createElement("q");
  var text1 = document.createTextNode(name);
  var text2 = document.createTextNode(message);
  newp1.appendChild(text1);
  newp2.appendChild(text2);
  newDIV.appendChild(newp1);
  newDIV.appendChild(newp2);
  var newcom = document.getElementById("com");
  newcom.appendChild(newDIV);
}

function add() {
  var table = document.getElementById("masterTable");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var name = document.getElementById("name").value;
  var message = document.getElementById("message").value;
  cell1.innerHTML = name;
  cell2.innerHTML = message;
}



function toggle_visibility(id) {
  var btn = document.getElementById('commentBtn');

  var e = document.getElementById(id);
  if (e.style.display == 'block') {
    e.style.display = 'none';
    btn.innerHTML = "More";
  } else {
    e.style.display = 'block';
    document.getElementById("commentBtn").value = "Less";
    btn.innerHTML = "Less";
  }
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

cite {
  font-weight: bold;
  padding-right: 1em;
}

.comments {
  display: flex;
}

#commentBtn {
  margin: auto 0.5em;
}

<h1>Test</h1>
<table id="masterTable">
  <tr>
    <th>Name</th>
    <th>Message</th>
    <th>Comments</th>
  </tr>
  <tr>
    <td>Tiago</td>
    <td>Hello how are you?</td>
    <td class="comments"><button id="commentBtn" onclick="toggle_visibility('comments');">More</button>
      <div id="comments" style="display: none;">
        <div id="com">
          <p>TestComment1</p>
          <p>TestComment2</p>
        </div>
        <h4>Submit a comment</h4>
        <form>
          <input type="text" id="name1" placeholder="name">
          <input type="text" id="message1" placeholder="message">
          <button onClick='comment();return false;' id='button'>Submit</button>
        </form>
      </div>
    </td>
  </tr>
  <tr>
    <td>Comment Name should display here</td>
    <td>Comment message should display here</td>
    <td></td>
  </tr>
</table>
</div>
<br/><br/>
<form>
  <h2>Submit a message</h2>
  <input type="text" id="name" placeholder="name">
  <input type="text" id="message" placeholder="message">
  <button onClick='add();return false;' id='button'>Submit</button>
</form>

I hope this helps you a bit with the js part, you are still missing the comment parts for the new message and the comments form for each message, then also , you will need to store this on the server side. good luck .