Why i can get the next product list when i click the next button, i am using the pagination of graphql in shopify with laravel app

This is my query(This is working query but static because i already put the cursor id/value to the after:"") but when i put the $cursor my pagination is not working.

I need to get the next product list on the same page that’s why i use AJAX but i dont know why it’s not working after i click the next button.

$numProducts = $request->input('numProducts', 3); // Default to 3 products per page
        $cursor = $request->input('cursor', null); // Get cursor from the request

    $query = <<<'GRAPHQL'
query ($numProducts: Int!){
    products(first: $numProducts, after: "eyJsYXN0X2lkIjo4NjM0Mjg1NDI0OTE0LCJsYXN0X3ZhbHVlIjoiODYzNDI4NTQyNDkxNCJ9", query: "(status:ACTIVE{{ TAG_FILTER }})") {
        edges {
            node {
                id
                title
                tags
                images(first: 9) {
                    edges {
                        node {
                            src
                        }
                    }
                }
            }
            cursor
        }
        pageInfo {
            hasNextPage
            endCursor
            hasPreviousPage

        }
    }
}
GRAPHQL;
$variables = [
            'numProducts' => $numProducts,
            'cursor' => $cursor,
        ];

        // Prepare the request payload
        $payload = [
            'query' => $query,
            'variables' => $variables,
        ];

        // Send the GraphQL request
        $response = Http::withBasicAuth($apiKey, $apiPassword)
            ->post($graphqlEndpoint, $payload);

        $data = $response->json();

        // Check if 'data' key exists in the response
    if (isset($data['data']) && isset($data['data']['products']['edges'])) {
        $products = $data['data']['products']['edges'];
        $nextCursor = $data['data']['products']['pageInfo']['endCursor'];
    } else {
        // Handle the case where the response structure is not as expected
        $products = [];
        $nextCursor = null;
    }

    // Now you can work with the $products array as needed

    return view('dashboard.product', [
        'data' => $products,
        'numProducts' => $numProducts,
        'cursor' => $cursor,
        'nextCursor' => $nextCursor,
    ]);
}

This is my AJAX
// Variables to track the current cursor and number of products

let afterCursor = null;
 let productsPerPage = 3; // You can set your desired number of products here

 // Function to load products using AJAX
 function loadProducts(afterCursor) {
     // Make an AJAX request to fetch products based on the current cursor and numProducts
     $.ajax({
         route: '/getShopifyProducts', // Replace with your Laravel route
         method: 'GET',
         data: {
            afterCursor: afterCursor,
             productsPerPage: productsPerPage
         },
         success: function(data) {
             // Handle the response data, update the product list, and pagination
             // You can update your product list and pagination elements here

             // Example: Update product list and pagination
             $('#productList').html(data
                 .productsHtml); // Replace 'productsHtml' with the actual key in your response
             $('#hasNextPage').val(data
                 .hasNextPage); // Replace 'hasNextPage' with the actual key in your response
             $('#hasPreviousPage').val(data
                 .hasPreviousPage); // Replace 'hasPreviousPage' with the actual key in your response
         }
     });
 }

 // Load products when the page loads
 $(function() {
     loadProducts(afterCursor);
 });

 let responseData = {}; // Initialize an empty object

 // Event listener for the "Next" button
 $('#nextPage').on('click', function() {
     if (responseData.hasNextPage) {
         // Update the cursor for the next page
         afterCursor = responseData.endCursor; // Use the endCursor from the response
         loadProducts(afterCursor);
     }
 });

 // Event listener for the "Previous" button
 $('#prevPage').on('click', function() {
     if (responseData.hasPreviousPage) {
         // Update the cursor for the previous page (if needed)
         afterCursor = responseData.startCursor; // Use the startCursor if available
         loadProducts(afterCursor);
     }
 });