JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript">
$(document).ready(function(){
var postURL = "addmore.php";
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td width="50%"><input type="text" name="name[]" class="form-control name_list" required="" /></td> <td width="12.5%"><input type="text" name="quantity[]" class="form-control name_list" required="" /></td> <td width="12.5%"><input type="text" name="measure[]" class="form-control name_list" required="" /></td> <td width="12.5%"><input type="text" name="discount[]" class="form-control name_list" required="" /></td> <td width="12.5%"><input type="text" name="total[]" class="form-control name_list" required="" /></td> <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:postURL,
method:"POST",
data:$('#add_product').serialize(),
type:'json',
success:function(data)
{
i=1;
$('.dynamic-added').remove();
$('#add_product')[0].reset();
alert('Record Inserted Successfully.');
}
});
});
});
</script>
<form name="add_product" id="add_product">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Measure</th>
<th>% discount</th>
<th>Price</th>
</tr>
<tr>
<td width="50%"><input type="text" name="name[]" class="form-control...