JSFiddle - React, Tailwind, and code Playground

HTML

<div class="set-form">
  <table 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() {
  document.getElementById('set-form').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>';