I have this form with some input fields, where upon submitting the form the data gets appended to a table, more like a list. The data gets appended to the table list and also gets sent to the data base using ajax, both action takes place when I click on submit. Below is the form.
<div id ="product_calculator" style="border: 1px solid gray; padding: 10px; display:none;margin-top: 5px;"><br>
<div class="row">
<div class="col-md-2">
<label>Product Name</label>
<input class="form-control" name="productname" type="text" id="productname" value=""><br>
</div>
<div class="col-md-2">
<label>Width</label>
<input class="form-control" name="width" step ="any" type="text" id="width" value=""><br>
</div>
<div class="col-md-2">
<label>Height</label>
<input class="form-control" name="height" step ="any" type="text" id="height" value=""><br>
</div>
<div class="row">
<div class="col-md-1">
<input type="button" class="btn btn-default" name="submit" class="submit" id="submit" class="btn btn-info" value="ADD TO LIST" />
</div>
</div>
This is table where the data gets appended,
<div>
<table class="table table-hover">
<thead>
<tbody class="details">
</tbody>
<tfoot>
</tfoot>
</table>
</div>
This is the jquery and ajax where I append the data to the list and send it to the database as well, you can also I attach a remove button to each of my appended list item
$('#submit').on("click" , function(){
var productname = $('#productname').val();
var width = $('#width').val();
var height = $('#height').val();
$.ajax({
url:"item_list_process.php",
method:"POST",
data:{productname:productname,width:width,height:height},
success:function(data){
$("#list_message").html(data)
}
})
var tr = '<tr>'+
'<td><input type="text" name="product_name[]" required class="form-control product_name" value="'+productname+'"></td>'+
'<td><input type="text" name="width[]" required class="form-control width" value="'+width+'"></td>'+
'<td><input type="text" name="height[]" required class="form-control height" value="'+height+'"></td>'+
'<td><input type="button" name="remove" class="btn btn-danger remove" value="Remove"></td>'+
'</tr>';
$('.details').append(tr);
})
Now you can see I attach a remove button to each of my list item, upon clicking on the button I remove the list item from the table as well as from the data base using ajax and jquery. The code is below, I use the data from the appended list to send it to php for it to recognize which line of item to delete
$('.details').on('click','.remove',function(){
var con = confirm("Do you want to remove it ?");
if(con){
var pro = $('.product_name').val();
var wid = $('.width').val();
var hei = $('.height').val();
$.ajax({
url:"item_list_delete.php",
method:"POST",
data:{pro:pro,wid:wid,hei:hei},
success:function(data){
$("#delete").html(data)
}
})
$(this).parent().parent().remove();
}
});
Now the problem is when I delete the data, ajax seems to be only working once when deleting the data from the data base, after that it dosent work, for example lets say I have 4 items, lets say I clicked on the 3rd item, the item gets deleted from database and also gets removed from the list, but when I click on the first item after deleting the 3rd item, the ajax dosent work anymore, nor does it work on any more of my list items when I click on thier remove button.