Why does the array in my nested jquery Ajax post call returns undefined values?

Question

I want to display 30+ graphs with Chart.js, each with different data, title, etc, without needing to write scripts for each of them. So, I want to iterate through the database-given ServiceId values.

    var ServiceId = [];
    var ServiceName = [];
    var ServiceDesc = [];
    

    $.post("data/GetServiceNames_data.php", function(data)
    {
        console.log(data);
        
        for (var i in data) {
            ServiceId.push(data[i].ServiceId);
            ServiceName.push(data[i].ServiceName);
            ServiceDesc.push(data[i].ServiceDesc);
        }
        
        for (var i = 0; i < ServiceId.length; i++){

            $.post("data/ServerStatuses_data.php", { 'ServiceId': ServiceId[i] }, 
                function (data)
                {
                    console.log(data);
                    var Timestamp = [];
                    var Status = [];
                    for (var i in data) {
                        Timestamp.push(data[i].Timestamp);
                        Status.push(data[i].status);
                    }
                    var chartdata = {
                        labels: Timestamp,
                        datasets: [
                            {
                                label: ServiceDesc[i], 
                                backgroundColor: 'rgb(103, 161, 118)',
                                borderColor: 'rgb(100, 129, 120)',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: Status,
                                borderWidth: 1
                            }
                        ]
                    };
                    var graphTarget = $("#ServerGraph"+ServiceId[i]);
                    console.log(graphTarget);
                    var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata,    
                        borderWidth: 1
                    });
                });

        }

    });

Why does ServiceId[i] and ServiceDesc[i] in the second post call (the one calling "ServerStatuses_data.php") returns 'undefined' as its values?

If it's needed, ServerStatuses_data.php contains this

header('Content-Type: application/json');
$ServiceId = $_POST['ServiceId'];
$conn = mysqli_connect(env('DB_HOST'), env('DB_USERNAME'), env('DB_PASSWORD'),env('DB_NAME'));
$sqlQuery = "SELECT trans_status.run_time AS Timestamp, trans_status.status FROM trans_status WHERE trans_status.idservice =  " . $ServiceId . " AND `trans_status`.`run_time` >= '2023-01-01 00:00:01' AND `trans_status`.`run_time` <= '2023-01-02 23:59:59';";
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}
mysqli_close($conn);
echo json_encode($data);

Thank you.