title: jQuery: Adding rows to a table
body: <p>I'm completely new to JavaScript and jQuery and now I am trying to modify a html table.</p>
  
  <p>Every time a button is clicked, the some stuff (input, text, button) should be added as the last row. I managed that for the first row, but when I click the button again, the next input will be added next to the last row and not under it. I don't understand why. Hope you can help.</p>
  
  <p>This is my html file:</p>
  
  <pre class="lang-html prettyprint-override"><code>...
  &lt;main&gt;
    &lt;article id="main"&gt;
      ...
      &lt;section id="neue vorschlaege"&gt;
        ...
        &lt;table id="vorschlaege"&gt; 
          &lt;tr&gt; 
            &lt;td&gt;Deine Idee&lt;/td&gt;
            &lt;td&gt;Vorschläge&lt;/td&gt;
            &lt;td&gt;Kategorie&lt;/td&gt;
            &lt;td&gt;Löschen&lt;/td&gt;
          &lt;/tr&gt;
          &lt;!-- I want to insert new rows here --&gt;
        &lt;/table&gt;
      &lt;/section&gt;
    &lt;/article&gt;
    ...
  &lt;/main&gt;
  </code></pre>
  
  <p>And this is my jQuery.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
    $('#abschicken').on('click', function(add){
      add.preventDefault();
      var name = $("#name").val();
      var fvv = $('input[name=FVV]:radio:checked').next('label:first').html();
      var zutaten = $("#zutaten").val();
      var passwort = $("#pw").val();
  
      $('#vorschlaege &gt; tbody:last-child').append(
        '&lt;/tr&gt;'
        +'&lt;td&gt;&lt;input type="checkbox" checked="true"&gt;&lt;/td&gt;'
        +'&lt;td&gt;'+name+'&lt;/td&gt;'
        +'&lt;td&gt;'+fvv+'&lt;/td&gt;'
        +'&lt;td&gt;&lt;button id="loeschen"&gt;löschen&lt;/button&gt;&lt;/td&gt;'
        +'&lt;/tr&gt;');
    });
  });
  </code></pre>