I am trying to add JSON response details from an AJAX call to a leaflet popup. I can populate the data using a modal in the html but I want to use this as an easy button function instead.

I have tried a few options but nothing is working to populate the data in the popup and it shows as blank. Everything else is working as it should and the button is added onto the map.

Any ideas?

$('#selCountry').on('change', function(){
  $.ajax({
      url: "php/restCountries.php",
      type: 'POST',
      dataType: 'json',
      data: {
          country: $('#selCountry').val()   
      },
      success: function(result) {
        
          console.log('restCountries', result);
          if (result.status.name == "ok") {
              iso2CountryCode = result.data.alpha2Code;
              var countryName2 = result.data.name;
              countryName = countryName2.replace(/\s+/g, '_');
              
              L.easyButton('<img src="images/info.png">', function(btn, map){
    
              var detailsPopup = L.popup($('#countryName').html('<strong> Country: ' + result['data']['nativeName'] + '</strong>') +
              $('#txtCurrencyCode').html('<strong> Capital City: ' + result['data']['capital'] + '<br> Currency Symbol: '+ result.currency.symbol + '<br> Currency Name: '  + result.currency.name + '<br> Currency Code: ' + result.currency.code + '</strong>')).setContent(popup);
                  detailsPopup.setLatLng(map.getCenter()).openOn(map);
              }).addTo(map);
              
              console.log(result.data.latlng[0]);
              
              var currentLat = result.data.latlng[0]
              var currentLng = result.data.latlng[1]
              
              marker = L.marker;
              
               L.marker([currentLat, currentLng], {icon: redMarker}).addTo(map);
              
                      if (marker != undefined) {
              map.removeLayer(marker);
        };