JSFiddle - React, Tailwind, and code Playground

HTML

<div class="set-form">
  <table id="myTable" class="table table-bordered">
    <tr>
      <th>Question</th>
      <th>Answer</th>
    </tr>
    <tr>
      <td>
        <textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style="resize: none; width: 100%;"></textarea>
      </td>
      <td>
        <textarea name="Answer" placeholder="Answer" th:field="${questionAnswerSet.answer}" id="answer" style="resize: none; width: 100%;"></textarea>
      </td>
    </tr>
  </table>
  <div class="set-form">
    <input type="button" id="more_fields" onclick="add_fields();" value="Add More" class="btn btn-info" />
  </div>

JavaScript

function add_fields() {
var table = document.getElementById("myTable");
var row = table.insertRow(0).innerHTML = '<tr><td><textarea name ="Question" placeholder="Question" th: field = "${questionAnswerSet.question}" id="question" style = "resize: none; width:100%;"></textarea></td><td><textarea name="Answer" placeholder ="Answer" th: field = "${questionAnswerSet.answer}" id="answer" style="resize:none;width: 100%;"></textarea></td ></tr>';
}