Issue Updating Dynamic Table Inputs in PHP and JavaScript Code When Adding a New Row

I have PHP and JavaScript code that is used to update journal entries retrieved from a database. When I attempt to edit entries without adding a new dynamic row, the update works successfully. However, when I add a new dynamic row with JavaScript, I get the following error message:
“An error occurred while processing the data. Please try again.”
The main issue is that the new inputs added dynamically in the table are not recognized properly in the $_POST array, while only the rows fetched from the database are recognized.

**PHP and JavaScript Code:
**

$test_date = htmlspecialchars(strip_tags($antiXss->xss_clean($_POST['date'])));
$descrip = htmlspecialchars(strip_tags($antiXss->xss_clean($_POST['descrip'])));
$company = htmlspecialchars(strip_tags($antiXss->xss_clean($_POST['company'])));
$auth_token = htmlspecialchars(strip_tags($antiXss->xss_clean($_POST['auth_token'])));
$sum1 = filter_var($_POST['sum1'], FILTER_VALIDATE_FLOAT);
$sum2 = filter_var($_POST['sum2'], FILTER_VALIDATE_FLOAT);
$account = $antiXss->xss_clean($_POST["account"]); 
$debtor = $_POST["debtor"]; 
$creditor = $_POST["creditor"]; 
$description = $antiXss->xss_clean($_POST["description"]); 
$acc_serial = $antiXss->xss_clean($_POST["acc_serial"]);
$has_error = false;

foreach ($account as $index => $count) {
if (isset($account[$index]) && isset($debtor[$index]) && isset($creditor[$index]) && isset($description[$index]) && isset($acc_serial[$index])) {
    $s_account = htmlspecialchars(strip_tags($antiXss->xss_clean($account[$index])));
    $s_debtor = filter_var($debtor[$index], FILTER_SANITIZE_NUMBER_INT);
    $s_creditor = filter_var($creditor[$index], FILTER_SANITIZE_NUMBER_INT);
    $s_description = htmlspecialchars(strip_tags($antiXss->xss_clean($description[$index])));
    $s_acc_serial = htmlspecialchars(strip_tags($antiXss->xss_clean($acc_serial[$index])));

    if (empty($s_account) || $s_debtor == "" || $s_creditor == "" || empty($s_description) || empty($s_acc_serial)) {
        echo '<script> $(document).ready(function(){ toastr.error("Please fill in all fields"); }) </script>';
        $has_error = true;
        break;
    }
    if ($s_debtor == $s_creditor) {
        echo '<script> $(document).ready(function(){ toastr.error("Debtor and Creditor cannot be equal in the same row"); }) </script>';
        $has_error = true;
        break;
    }
} else {
    echo '<script> $(document).ready(function(){ toastr.error("An error occurred while processing the data. Please try again."); }) </script>';
    var_dump($_POST["account"], $_POST["debtor"], $_POST["creditor"], $_POST["description"], $_POST["acc_serial"]);
    $has_error = true;
    break;
}
}

**JavaScript for Dynamically Adding Rows:
**

var i = 0;
$("#add-btn").click(function() {
++i;
$("#dynamicAddRemove").append('<tr>'+
  '<td class="td">'+product_dd+'</td>'+
  '<td class="td"><input type="text" name="debtor[]" class="form-control debtor" required></td>'+
  '<td class="td"><input type="text" name="creditor[]" class="form-control creditor" required></td>'+
  '<td><input type="text" name="description[]" class="form-control" required></td>'+
  '<td><input type="hidden" name="acc_serial[]" class="form-control acc_serial" required></td>'+
  '<td><button type="button" class="btn btn-danger remove-tr"><i class="fas fa-trash"></i></button></td>'+
  '</tr>');
$('.js-example-basic-single').select2();
});

HTML

<tr>
    <td>
        <select class="form-control select_acount js-example-basic-single select2" name="account[]" required>
            <option value="<?php echo $_acc_serial_token;?>"><?php echo $_account;?></option>
            <?php
            $stmt = $con->prepare("SELECT * FROM categories WHERE parent_id != ? AND status = ? AND company = ?");
            $a = 0;
            $stmt->bind_param('iis', $a, $a, $_SESSION["company"]);
            $stmt->execute();
            $resultCategories = $stmt->get_result();
            $rows = [];
            foreach ($resultCategories as $row) {
                $rows[] = $row;
            ?>
            <option value="<?php echo htmlspecialchars(strip_tags($antiXss->xss_clean($row['acc_serial']))); ?>">
                <?php echo htmlspecialchars(strip_tags($antiXss->xss_clean($row['acc_name']))); ?>
            </option>
            <?php } ?>
            <?php $stmt->close(); ?>
        </select>
    </td>
    <td>
        <input type="text" style="max-width: 94px;" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpaste="return false" name="debtor[]" value="<?php echo $_debtor;?>" class="form-control debtor" required>
    </td>
    <td>
        <input type="text" style="max-width: 94px;" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpaste="return false" name="creditor[]" value="<?php echo $_creditor; ?>" class="form-control creditor" required>
    </td>
    <td>
        <input type="text" name="description[]" value="<?php echo $_description; ?>" style="min-width: 205px;" class="form-control" required>
    </td>
    <td>
        <input name="acc_serial[]" class="form-control acc_serial" type="hidden" value="<?php echo $_acc_serial_token; ?>" required>
    </td>
    <td>
        <button type="button" name="add" class="btn btn-danger remove-tr"><i class="fas fa-trash"></i></button>
    </td>
</tr>

• I used var_dump($_POST) to check the new inputs after clicking the “Add Row” button. The output showed that the dynamically added inputs weren’t passed in $_POST.
• I ensured that input names included [] (like debtor[] and creditor[]) to gather them as array fields, but the issue persists.
• I tried validating the values with JavaScript and PHP to make sure they’re correctly set when adding a new row.