Ajax/jQuery pass variable data to another jQuery? – Jquery ajax

I have two jQuery calls, one to get visitor city by IP, another which opens a pop-up on a website. I have a problem, first call get the client city but I can not, not sure how to pass it to the second query. Does anyone know how to do it?

client_city needs to be passed to this query, as city=client_city

hidden: 'utm_source,utm_medium,utm_campaign,utm_term,utm_content'

I tried various ways, but somewhy first call doesn’t pass the variable data outside its function, any ideas?

// First Call to get City
jQuery.ajax({
  type: "GET",
  dataType: "json",
  url: 'https://ip-api.io/json?api_key=****',
  success: function(data) {
  client_city=data.city
  console.log(client_city)
  }
});

// Second Call to create pop
jQuery(function($){
    
    $('#menu-item-37 a').click(function (e) {
        e.preventDefault();
        var popup = window.tf.createPopup('sxmSCYSc', {
            hideHeaders: true,
            transitiveSearchParams: ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'],
            iframeProps: {
                title: 'Dermatologo konsultacija internetu - iDerma'
            },
            medium: 'snippet',
            hidden: 'utm_source,utm_medium,utm_campaign,utm_term,utm_content'
        });
        popup.toggle();
    });
});