动态添加输入字段并在下拉选择框中调用两张数据库表

我已实现点击按钮动态添加下拉选择项，且为每行配置了计算逻辑，目前所有数据均来自单张数据库表，但需从同一数据库的另一张表中获取Levy值并应用到计算中。

动态添加新行和输入字段的JavaScript代码 #

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 product_price" 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 quantity" type="number" 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="number" id="levy'
+rowCount+'" name="levy"  for="'+rowCount+'"/> </td><td><input class="form-control total_cost" type="text" id="total_cost_'
+rowCount+'" name="total_cost"  for="'+rowCount+'" readonly/><input hidden class="form-control tax_all" type="text" id="tax_all_'
+rowCount+'" name="tax_all" for="'+rowCount+'" readonly/><input hidden class="form-control totalBefore" type="text" id="totalBefore_'
+rowCount+'" name="totalBefore" for="'+rowCount+'" readonly/></td></tr>');
});
});

计算逻辑代码 #

// 使用新索引而非全局变量i
function getTotalCost(ind) {
var qty = $('#quantity_'+ind).val();
var levy = $('#levy'+ind).val();
var price = $('#product_price'+ind).val();
var tax = $('#tax'+ind).val();
var tax_totNumber = (qty * price) * tax;
var before_tax = qty * price;
var totNumber = tax_totNumber + (qty * price) + (qty * levy);
var tot = totNumber.toFixed(2);
$('#total_cost_'+ind).val(tot);
$('#tax_all_'+ind).val(tax_totNumber);
$('#totalBefore_'+ind).val(before_tax);
calculateSubTotal();
calculateTax();
calculateBeforeTax();
}

获取选择项值的代码 #

for(let i=1; i<25; i++) {

document.addEventListener('click', function(event) { 

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"))
mySelect.addEventListener("change", () => document.getElementById("levy" + i).value = mySelect.options[mySelect.selectedIndex].getAttribute("data-levy"))

console.log(mySelect);

}
});
}

内容的提问来源于stack exchange，提问作者Pierre