AJAX GET Request - URL showing undefined

I am making a wordpress plugin, and using a hotel api. I am just trying to test it and make it display a list of countries from the API.

The error I am facing is that it is showing the URL as undefined like this - undefined/content-api/1.0/countries, it is giving a 404 error aswell.

This is how I am getting the credentials - through user inputs on a form

    $api_key = esc_attr(get_option('api_key'));
    $secret_key = esc_attr(get_option('secret_key'));
    $endpoint_url = esc_attr(get_option('endpoint_url'));
    // Calculate the MD5 hash of the secret key
    $api_signature = md5($secret_key);

  <tr valign="top">
       <th scope="row">Endpoint URL:</th>
       <td><input type="text" name="endpoint_url" value="<?php echo $endpoint_url; ?>" /><td>
  </tr>

This is the code to get the countries and display them.

// Get All Countries button click event
            $('#get-all-countries-button').click(function() {
                var endpointUrl = $('#endpoint_url').val();
                var apiKey = $('#api_key').val();
                var secretKey = $('#secret_key').val();

                // Perform an API request to retrieve all countries
                console.log("Retrieving All Countries...");
                $.ajax({
                    url: endpointUrl + '/content-api/1.0/countries', // Construct the correct API URL
                    type: 'GET',
                    dataType: 'json', // Parse the response as JSON
                    headers: {
                        'APIKey': apiKey,
                        'Signature': '<?php echo $api_signature; ?>', // Use the MD5 hash of the secret key
                        'Content-Type': 'application/json'
                    },
                    success: function(response) {
                        // Display the list of countries
                        if (response.IsSuccess && response.Content.length > 0) {
                            var countries = response.Content.map(function(country) {
                                return country.Name;
                            });
                            $('#all-countries-result').html('<p>' + countries.join(', ') + '</p>');
                            console.log("All Countries Retrieved", response);
                        } else {
                            $('#all-countries-result').html('<p>No countries available.</p>');
                            console.error("No Countries Available");
                        }
                    },
                    error: function(xhr) {
                        // Display an error message
                        $('#all-countries-result').html('<p>Failed to retrieve countries.</p>');
                        console.error("Failed to Retrieve Countries", xhr);
                    }
                });
            });

I just wanted to let you know that you have not given id to your input. Could you add id attribute to your input like this?

<tr valign="top">
           <th scope="row">Endpoint URL:</th>
           <td><input type="text" name="endpoint_url" id="endpoint_url" value="<?php echo $endpoint_url; ?>" /><td>
      </tr>