Pobieranie danych z API, jQuery

Hej,
Mam problem przy prostej stronce wyszukującej kraje, które pobiera dane z API https://restcountries.eu/.
Wyszukiwanie krajów działą, problem dotyczy pobrania danych dla danego klikniętego kraju i wyświetlenia ich poniżej. Generalnie dość przypadkowo udało mi się osiągniać zamierzony efekt dopisując do końca danej funckji $(this)(), ale nie tak to powinno wyglądać. Kombinowałem z użyciem tego thisa ale nie mogę uzyskać pożądanego rezultatu bez errorów.

Kod skrytu wygląda następująco:

// zmienne z adresem URL oraz listą krajów
var url = 'https://restcountries.eu/rest/v2/name/';
var countriesList = $('#countries');

// na kliknięcie szukaj uruchamiamy funkcję
$('#search').click(searchCountries);

// ukrycie div'a z flagą kraju
var cFlag = $('#c-flag');
cFlag.hide();

// Główna funkcja
function searchCountries() {
    var countryName = $('#country-name').val();

    if(!countryName.length) countryName = 'Poland';

    $.ajax({
        url: url + countryName,
        method: 'GET',
        success: showCountriesList
    })

    // Funkcja uzupełniająca kraje
    function showCountriesList(resp){
        countriesList.empty();
 
        resp.forEach(function(item) {
            $('<li>').text(item.name).appendTo(countriesList);

            
            var countries = $('#countries li');
            // Funkcja pobierająca dane kraju po kliknięciu
            countries.click(function(){
                cFlag.show();

                console.log($(this).text());
                
                var cname = $('#c-name');
                var capital = $('#cap');
                var population = $('#pop');
                var area = $('#are');
                var language = $('#lan');
                var currency = $('#cur');
                var dialing = $('#dia');

                cname.empty();
                cname.text(item.name);

                capital.children().text(item.capital);
                population.children().text(item.population.toLocaleString("pl-PL"));
                area.children().first().text(item.area.toLocaleString("pl-PL"));
                language.children().text(item.languages.map(l => l.name));
                currency.children().text(item.currencies.map(c => c.name + ' - ' + c.code)) ;
                dialing.children().text('+' + item.callingCodes);

                // flag.src = item.flag;
                document.querySelector('img').src = item.flag;
                
                // this, który generuję błąd, ale pobieranie danych na klik działa
                $(this)();
            });
            
        })
     
    } 
}

```
Cały kod jeszcze do podejrzenia tutaj: https://codepen.io/wk-90/pen/dyYPyrV
Będę wdzięczny za podpowiedzi jak to poprawnie zrobić.

$('#search').click(function() {
	$.get('https://restcountries.eu/rest/v2/name/' + $('#country-name').val(), function(response) {
		countries = response
		
		$('#countries').empty()
		
		countries.forEach(function(item, index) {
			$('<li>').text(item.name).attr('key', index).appendTo($('#countries'))
		})
	})
});

$('#countries').on('click', 'li', function() {
	var clickedItem = $(this).attr('key')
	
	$('#c-flag').show();

	var cname = $('#c-name');
	var capital = $('#cap');
	var population = $('#pop');
	var area = $('#are');
	var language = $('#lan');
	var currency = $('#cur');
	var dialing = $('#dia');
	
	cname.empty();
	cname.text(countries[clickedItem].name);
	
	capital.children().text(countries[clickedItem].capital);
	population.children().text(countries[clickedItem].population.toLocaleString("pl-PL"));
	area.children().first().text(countries[clickedItem].area.toLocaleString("pl-PL"));
	language.children().text(countries[clickedItem].languages.map(l => l.name));
	currency.children().text(countries[clickedItem].currencies.map(c => c.name + ' - ' + c.code));
	dialing.children().text('+' + countries[clickedItem].callingCodes);

	document.querySelector('img').src = countries[clickedItem].flag;
})