I am using this html to display my table. I am looping through data to show multiple rows.
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $srno=1;
for ($x=0; $x < count($quotes[0]->workOrderLineItem); $x++ ) {?>
<tr>
<td width="50%"><input type="text" name="detail[]" value="<?php echo $quotes[0]->workOrderLineItem[$x];?>" required=""</td>
<td width="10%"><input type="number" name="qty[]" value="<?php echo $quotes[0]->qty[$x];?>" required=""</td>
<td width="15%"><input type="number" name="price[]" value="<?php echo preg_replace("/[\$,]/", '', $quotes[0]->priceArray[$x]); ?>" required=""</td>
<td width="12%"><div class="inline"><input type="button" id="addButton" class="btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" id="deleteButton" class="btn btn-primary btn-xs" value="Delete"/></div>
</tr>
<?php } ?>
</tbody>
</table>
I am then using this script to add and delete rows
$(function(){
$("#addButton").click(function(){
$(this).closest("tr").clone(true).appendTo("#myTable");
});
$("#deleteButton").click(function(){
var x = $('#myTable tr').length;
if(x == 2){
} else {
$(this).closest("tr").remove();
}
});
});
This works fine whenever I have a single table row, but when I have multiple rows the additional row "add" and "delete" buttons do not work. Only the first row buttons work. What is the best way to accomplish being able to delete and add rows from the additional rows?
remove the id from the td
<td width="12%"><div class="inline"><input type="button" class="addButton btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" class="deleteButton btn btn-primary btn-xs" value="Delete"/></div>
And then change the click selector to $(".addButton") and $(".deleteButton") respectivel
can you give me the content of the $quotes var to reproduce your problem in my local environment ?
Thanks, this is the code you should be using, I just made some changes in the $quote var
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$quotes = [];
$quotes[] = ['workOrderLineItem' => ["Color Change","Printed Wrap"], 'qty' => [3,2], 'price' => [267, 784] ];
$srno=1;
for ($x=0; $x < count($quotes[0]['workOrderLineItem']); $x++ ) {?>
<tr>
<td width="50%"><input type="text" name="detail[]" value="<?php echo $quotes[0]['workOrderLineItem'][$x];?>" required=""</td>
<td width="10%"><input type="number" name="qty[]" value="<?php echo $quotes[0]['qty'][$x];?>" required=""</td>
<td width="15%"><input type="number" name="price[]" value="<?php echo preg_replace("/[\$,]/", '', $quotes[0]['price'][$x]); ?>" required=""</td>
<td width="12%"><div class="inline"><input type="button" name="addButton" class="btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" name="deleteButton" class="btn btn-primary btn-xs" value="Delete"/></div>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
$(function(){
$("input[name='addButton']").on('click', function(){
$newElement = $(this).closest("tr").clone(true);
$("#myTable").append($newElement);
});
$("input[name='deleteButton']").click(function(){
var x = $('#myTable tr').length;
if(x == 2){
} else {
$(this).closest("tr").remove();
}
});
});
</script>
</body>
</html>