title: Using JavaScript to add a table rows that have input fields
body: <p>So I'm trying to add extra input fields within a table row using JavaScript, and I can't seem to figure out.  My approach right now is to just insert extra html code and add a new table row every time someone clicks the "add more" button.  Here's my code right now</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="set-form"&gt;
  &lt;table class="table table-bordered"&gt;
  &lt;tr&gt;
    &lt;th&gt;Question&lt;/th&gt;
    &lt;th&gt;Answer&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style="resize: none; width: 100%;"&gt;&lt;/textarea&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;textarea name="Answer" placeholder="Answer" th:field="${questionAnswerSet.answer}" id="answer" style="resize: none; width: 100%;"&gt;&lt;/textarea&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class="set-form"&gt;
  &lt;input type="button" id="more_fields" onclick="add_fields();" value="Add More" class="btn btn-info" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And Here's my JavaScript</p>
  
  <pre><code>function add_fields() {
  document.getElementById('set-form').innerHTML += '&lt;tr&gt; &lt; td &gt; &lt;   textarea name = "Question"
  placeholder = "Question"
  th: field = "${questionAnswerSet.question}"
  id = "question"
  style = "resize: none; width: 100%;" &gt; &lt; /textarea&gt;&lt;/td &gt;
  &lt; td &gt; &lt; textarea name = "Answer"
  placeholder = "Answer"
  th: field = "${questionAnswerSet.answer}"
  id = "answer"
  style = "resize: none; width: 100%;" &gt; &lt; /textarea&gt;&lt;/td &gt;
  &lt; /tr&gt;'; }
  </code></pre>
  
  <p>It may be a little unorganized on here, but here's a link to a JSFiddle of the code <a href="http://jsfiddle.net/2t9Dh/357/" rel="nofollow">http://jsfiddle.net/2t9Dh/357/</a>.  It's probably a pretty simple mistake, if anyone can see my issue and help me out, that would be great. Thanks in advance.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I'm closing the function, and updating the id and class names</p>