I have a table where you can add and remove rows. I have a select option where you select a customer and then it populates a dropdown in the table with all the products. Once you have selected a product, it populates all the fields correlating that product, such as: price, description, tax etc.
My issue is that when i add a new row to the table, the products display in the new dropdown, however when i select a product it does not display the information for that product in the new row fields.
Table
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th><h6>Item</h6></th>
<th><h6>Description</h6></th>
<th><h6>Rate</h6></span></th>
<th><h6>Quantity</h6></th>
<th><h6>Tax</h6></th>
<th><h6>Subtotal</h6></th>
</tr>
</thead>
<tbody id="orders">
<tr>
<td><button type="button" name="add" id="add" class="btn btn-success circle">Add row</button></td>
<!------ Item -------->
<td><select style="width: 100%;" name="item" id="item1" class="browser-default custom-select-new">
<option value="" disabled selected>Click to See Products</option>
<?php
$records = mysqli_query($conn, "SELECT * FROM customer_product WHERE customer LIKE '$Comid' ");
while ($data = mysqli_fetch_array($records)) {
$price = $data['new_total_rate'];
$product = $data['product'];
$discription = $data['description'];
echo '<option value="' . $data['product'] . '"
data-new_price_rate="' . $data['new_total_rate'] . '"
data-description="' . $data['description'] . '"
data-tax="' . $data['tax'] . '" >'
. $data['product'] . '</option>';
}
?>
</select>
</td>
<!------ Description -------->
<td><input class="form-control description" type='text' id='description1' name='description[]' for="1"/></td>
<!------ Rate -------->
<td><input class="form-control product_price" type='number' data-type="product_price" id='product_price1' name='product_price[]' for="1"/></td>
<!------ Quantity -------->
<td><input class="form-control quantity" type='number' id='quantity_1' name='quantity[]' for="1"/></td>
<!------ Tax -------->
<td><input class="form-control tax" type='number' id='tax1' name='tax[]' for="1"/></td>
<!------ SubTotal -------->
<td><input class="form-control total_cost" type='text' id='total_cost_1' name='total_cost[]' for='1' readonly/></td>
</tr>
</tbody>
</table>
Script to add new rows
<script>
var rowCount = 1;
$( document ).ready(function() {
$('#add').click(function() {
rowCount++;
$('#orders').append('<tr id="row'+rowCount+'"><td><button type="button" name="remove" id="'
+rowCount+'" class="btn btn-danger btn_remove circle">Remove</button></td><td><select style="width: 100%;" name="item'+rowCount+'" id="item'
+rowCount+'" class="browser-default custom-select-new"><option value="" disabled selected>Click to See Products</option><?php $records = mysqli_query($conn, "SELECT * FROM customer_product WHERE customer LIKE '$Comid' "); while ($data = mysqli_fetch_array($records)) { echo '<option value="' . $data['product'] . '" data-new_price_rate="' . $data['new_total_rate'] . '" data-description="' . $data['description'] . '" data-tax="' . $data['tax'] . '" >' . $data['product'] . '</option>'; } ?></select></td><td><input class="form-control" type="text" id="description'
+rowCount+'" name="description[]" for="'+rowCount+'"/></td><td><input class="form-control" type="number" id="product_price'
+rowCount+'" name="product_price[]" for="'+rowCount+'"/></td><input class="form-control" type="hidden" data-type="product_id" id="product_id_'
+rowCount+'" name="product_id[]" for="'+rowCount+'"/><td><input class="form-control" type="number" class="quantity" id="quantity_'
+rowCount+'" name="quantity[]" for="'+rowCount+'"/> </td><td><input class="form-control" type="number" id="tax'
+rowCount+'" name="tax[]" for="'+rowCount+'"/> </td><td><input class="form-control" type="text" id="total_cost_'
+rowCount+'" name="total_cost[]" for="'+rowCount+'" readonly/> </td></tr>');
});
});
</script>
Script to get values from rows and new row values
<script>
for(let i=1; i<25; i++) {
let mySelect = document.getElementById("item" + i);
if (mySelect !== null) {
mySelect.addEventListener("change", () => document.getElementById("product_price" + i).value = mySelect.options[mySelect.selectedIndex].getAttribute("data-new_price_rate"))
mySelect.addEventListener("change", () => document.getElementById("description" + i).value = mySelect.options[mySelect.selectedIndex].getAttribute("data-description"))
mySelect.addEventListener("change", () => document.getElementById("tax" + i).value = mySelect.options[mySelect.selectedIndex].getAttribute("data-tax"))
console.log(mySelect);
}
}
</script>
