AJAX post data is not received in PHP

I’ve recently started learning PHP from the very basics. After following some tutorials I’m trying to learn something and here I’m facing a problem and after visiting different URLs for similar issues but couldn’t solve mine.

I have a page where user enters data in form and that data is added in a grid (table) by using Add button. On Save button the table data is sent to the PHP using Ajax. Along with this table data there are 3 text fields on the same form whose data is not added in that table and those text fields data also being sent to the PHP by using Ajax Call. Here is my Save button code.

$("#save").on("click", function (e) {
        e.preventDefault();
        debugger
        if (!iQuantity || !iDiscount) { // This is checking validation.
            $("#message").fadeIn(1000).html(`<div class="alert alert-warning">Please fill all the fields</div>`);
            $("#message").fadeOut(3000);
        } 
              
        if ($("#amountPayable").val() === "" || $("#amountPayable").val() == 0 || $("#amountPaid").val() === "" || $("#amountPaid").val() == 0 
            || $("#discountGiven").val() === "" ) {

            $("#message").fadeIn(1000).html(`<div class="alert alert-warning">Please fill all the fields</div>`);
            $("#message").fadeOut(3000);

        } else {

                var tableData = [];
                $('#addTable tbody tr').each(function () {
                    debugger
                    var rowData = {
                        itemId: $(this).find('td:eq(0)').text(),    // first column in row is trainee  (on index 0)
                        saleId: $(this).find('td:eq(1)').text(),   // second column in row is title
                        qty: $(this).find('td:eq(3)').text(),   // 4th column in row is attend
                        amount: $(this).find('td:eq(4)').text(),  // 5th column in row is trainer                        
                    };
                    tableData.push(rowData);
                });

            var formFields = {   // This takes text fields data
                amountPayable: $("#amountPayable").val(),
                amountPaid: $("#amountPaid").val(),
                discountGiven: $("#discountGiven").val(),
            };

            // Here I'm making object of both above objects.
            var dataToSend = {
                td: JSON.stringify(tableData), // Grid data
                ff: JSON.stringify(formFields), // Text fields data
            };
            

            console.log("ok");
            $("#message").html("");
            debugger
            $.ajax({
                url: "../add-pages/add-orders.php",
                type: "POST",
                data: dataToSend,
                processData: false,
                contentType: false,
                
                success: function (receivedData) {
                    debugger
                    var dt = receivedData;
                    $('#message').fadeIn(1000).html(receivedData);
                    $("#message").fadeOut(3000);

                    // --------------------------------------------- For Claring the Form Fields, ---------------------------------------------
                    $(':input', '#addOrdersData')
                        .not(':button, :submit, :reset, :hidden')
                        .val('')
                        .prop('checked', false)
                        .prop('selected', false);
                    
                    $("#update").attr("disabled", true);
                }
            });
        }
    });

And here is my PHP code where I’m receiving the code:


    <?php
     date_default_timezone_set('Asia/Karachi');

     $tableData = json_decode($_POST['td']); // Grid data
     $ff = json_decode($_POST['ff']); // Grid data
   ?>

The error I received in PHP is:

Warning: Undefined array key “td” in C:xampphtdocssuperStoreadd-pagesadd-orders.php on line 4

Please guide me where the mistake is happening.

Thank you very much, SOF.