JQuery dynamically appending and removing rows in a table -

JQuery dynamically appending and removing rows in a table -

i intern learning jquery , asked design basic webpage shows whether employees @ office. info displayed in table in form of employee name, yes/no buttons(if employees in office), , optional note employee is. user should able add together , remove employees. able remove employees table, having 2 issues.

1) cannot add together employees table

2) when added additional code add together employees, no longer able remove employees table.

how prepare this?

$(document).ready(function() { $(document).on('click', '.del', function() { $(this).parent().parent().remove(); }); $('.sub').click(function() { var name = $('input[name=name]').val(); var phone = $('input [name=phone]').val(); var email = $('input [name=email]').val(); var modal = "<td><button class=\"del\">x</button><a href=\"#openmodal\">"+name + " </a><div id=\"openmodal\" class=\"modaldialog\"><div><a href=\"#close\" title=\"close\" class=\"close\">x</a><h2> " + name + "</h2><p>phone: " + phone + "</p><p>email: " + email + "</p></div></div></td>"; var radio = "<td> <input type='radio' id='yes'>yes<br><input type='radio' id='no' >no</td>"; var textarea = "<td><textarea placeholder='optional note are, or schedule'></textarea></td>"; var tr = "<tr>" + modal + radio + textarea+ "</tr>"; $('#table').append(tr); });

});

jquery