I need help pulling MySQL data for a dynamic number of rows using PHP/jQuery/AJAX

Question

I have a form that users can fill out with various pieces of information (see image below).

In the middle of the form there exists a dynamic number of rows that each have columns for Waste Code, Material, Classification, Base Cost, etc.

When the user types in the Waste Code then the Material, Classification, and Base Cost should automatically populate based off information stored in a MySQL database table. I have worked with PHP in the past and have successfully connected the first row to automatically update when the Waste Code is filled out.

The problem I am experiencing, however, relates to the fact that this form can have a dynamic number of rows. The user can click the yellow and white plus (+) button on the right to add a new row in order to fill out more information.

My question is this: can someone show me how to write an AJAX call to pull in MySQL data for each new row in a form with a dynamic number of form rows?

I have tried to create a loop that does this but it has not worked. My current code has an individual block for the first 5 rows and I know this is not the correct nor most efficient solution.

Any assistance helps!

jQuery/AJAX

<script>
    jQuery(document).ready(function(){

        jQuery(document).on('keyup','#wasteCode1',function(){
            jQuery("#wasteDiv1").load("waste-code.php",{
                wasteID: jQuery("#wasteCode1").val(),
                divNum: 1
            });
        })

        jQuery(document).on('keyup','#wasteCode2',function(){
            jQuery("#wasteDiv2").load("waste-code.php",{
                wasteID: jQuery("#wasteCode2").val(),
                divNum: 2
            });
        })

        jQuery(document).on('keyup','#wasteCode3',function(){
            jQuery("#wasteDiv3").load("waste-code.php",{
                wasteID: jQuery("#wasteCode3").val(),
                divNum: 3
            });
        })

        jQuery(document).on('keyup','#wasteCode4',function(){
            jQuery("#wasteDiv4").load("waste-code.php",{
                wasteID: jQuery("#wasteCode4").val(),
                divNum: 4
            });
        })

        jQuery(document).on('keyup','#wasteCode5',function(){
            jQuery("#wasteDiv5").load("waste-code.php",{
                wasteID: jQuery("#wasteCode5").val(),
                divNum: 5
            });
        })

    })
</script>

PHP

<?php

require 'php/includes/dbh.inc.php';
mysqli_select_db($conn, "RC Terminal");

$wasteID = $_POST['wasteID'];
$divNum = $_POST['divNum'];
$sqlWasteCode = "SELECT * FROM Materials WHERE Waste_Code = '" . $wasteID . "'";
$result = mysqli_query($conn, $sqlWasteCode);

if (mysqli_num_rows($result) > 0){

    while($row = mysqli_fetch_assoc($result)){
        echo '<input id="material' . $divNum . '" type="text" name="material' . $divNum . '" class="form-control mr-1" style="width:150px;height:32px;" value="' . $row['Material'] . '">';
        echo '<input id="classification' . $divNum . '" name="classification' . $divNum . '" class="form-control mr-1" style="width:300px;height:32px;" value="' . $row['Classification'] . '">';
        echo '<input id="baseCost' . $divNum . '" name="baseCost' . $divNum . '" type="number" class="form-control mr-1" style="width:85px;text-align:right;" value="' . $row['Base_Cost'] . '">';
    }
    
} else {
    echo '<input id="material' . $divNum . '" type="text" name="material' . $divNum . '" class="form-control mr-1" style="width:150px;height:32px;">';
    echo '<input id="classification' . $divNum . '" name="classification' . $divNum . '" class="form-control mr-1" style="width:300px;height:32px;">';
    echo '<input id="baseCost' . $divNum . '" name="baseCost' . $divNum . '" type="number" class="form-control mr-1" style="width:85px;text-align:right;">';
}

die();

?>

HTML

<div id="materialContainer">
<div id="MaterialGroup1" class="row mx-0 p-0 mt-1">

    <input id="wasteCode1" class="form-control success mr-1 " name="wasteCode1" class="mr-1" style="width:150px;height:32px;">

    <div id="wasteDiv1" class="wasteCodeDiv" style="display:inherit;">
        <input id="material1" type="text" id="material1" name="material1" class="form-control mr-1" style="width:150px;height:32px;">
        <input id="classification1" name="classification1" class="form-control mr-1" style="width:300px;height:32px;">
        <input id="baseCost1" name="baseCost1" type="number" class="form-control mr-1" style="width:85px;text-align:right;" onblur="calcSubtotal(this)">
    </div>
    <button type="button" id="btnAddPallets1" name="addPallets" class="btn btn-outline-success mr-1 mt-0 p-0" style="height:32px; width:100px; font-weight:800;color:white;" data-toggle="modal" data-target="#addPalletModal">+</button>
    <input id="totalPallets1" name="totalPallets1" type="number" class="form-control mr-1" style="width:100px;text-align:right;">
    <input id="wasteCodeTotalWeight" name="wasteCodeTotalWeight" type="text" class="form-control mr-1" style="width:100px;text-align:right;" autocomplete="off">
    <input id="subtotal1" name="subtotal1" type="text" class="form-control mr-1" style="width:100px;text-align:right;background-color:transparent !important;">
    <select id="receiveType1" name="receiveType1" class="form-control success mr-1" style="width:125px;height:32px;"">
        <option selected disabled hidden value=''></option>
        <option>Process</option>
        <option>RTS</option>
    </select>
    <button type="button" id="btnAddMaterial1" class="btn btn-outline-warning mr-1 mt-0 p-0" style="height:32px; width:44px; font-weight:800;color:white;" onclick="addMaterial()">+</button>
    <input type="text" id="timestamp1" name="timestamp1" class="form-control mr-1" style="width:200px;border:1px solid red;visibility:hidden;">
</div>