Estoy tratando de agregar una tabla en la que encierre los inputs que muestro a continuacion, los headers esos son estaticos pero igual no he podido agregarlos de forma exitosa ya que si creo la tabla el boton de eliminar deja de funcionar, caba aclarar que este boton fue diseñado para eliminar un solo input y me gustaria que funcionara y eliminara todos mis campos fila por fila:
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div><input type="text" name="parametros[]"/> <input type="text" name="unidad[]"/> <input type="text" name="especificacion[]"/> <input type="text" name="resultado[]"/> <a href="#" class="delete">Eliminar</a></div>'); //add input box
}
else {
alert('You Reached the limits')
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Agregar malla o fondo & nbsp;
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<table class="table-bordered table-striped">
<tr>
<th>PÁRAMETRO</th>
<th>UNIDAD</th>
<th>ESPECIFICACIÓN</th>
<th>RESULTADO</th>
</tr>
</table>
</div>