Adding new rows in table not displaying related information from database

Question

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>

Answer 1

<script>
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"))

console.log(mySelect);

    }
  });  
 }
</script>