I'm completely new to JavaScript and jQuery and now I am trying to modify a html table.
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.
This is my html file:
...
<main>
<article id="main">
...
<section id="neue vorschlaege">
...
<table id="vorschlaege">
<tr>
<td>Deine Idee</td>
<td>Vorschläge</td>
<td>Kategorie</td>
<td>Löschen</td>
</tr>
<!-- I want to insert new rows here -->
</table>
</section>
</article>
...
</main>
And this is my jQuery.js:
$(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 > tbody:last-child').append(
'</tr>'
+'<td><input type="checkbox" checked="true"></td>'
+'<td>'+name+'</td>'
+'<td>'+fvv+'</td>'
+'<td><button id="loeschen">löschen</button></td>'
+'</tr>');
});
});