Как правильно сделать клик в клике?

Есть input с автокомплитом. В автокомплите структара данных:

<div id="suggesstion-box">
    <ul id="country-list">
        <li onclick="selectCountry('Пара-Чинар (Пакистан) регламент 50 мин '); ">Пара-Чинар (Пакистан)
            <span class="test-li" li-data="Пара-Чинар" span-data="244"></span>
        </li>
        <li onclick="selectCountry('Параку (Бенин) регламент 50 мин '); ">Параку (Бенин)
            <span class="test-li" li-data="Параку" span-data="244"></span>
        </li>
        <li onclick="selectCountry('Парапарауму (Новая Зеландия) регламент 90 мин '); ">
            Парапарауму (Новая Зеландия)
            <span class="test-li" li-data="Парапарауму" span-data="246"></span>
        </li>
        <li onclick="selectCountry('Параси (Соломоновы острова) регламент 90 мин '); ">
            Параси (Соломоновы острова)
            <span class="test-li" li-data="Параси" span-data="246"></span>
        </li>
        <li onclick="selectCountry('Паратебуэно (Колумбия) регламент 50 мин '); ">
            Паратебуэно (Колумбия)
            <span class="test-li" li-data="Паратебуэно" span-data="244"></span>
        </li>
    </ul>
</div>

js

$('#country-list li').click(function (){
  var test = $(this).find('span').attr('span-data');
  alert (test);
});

Всё отрабатывает хорошо, я получаю span-data кликнутого элемента. Дальше есть кнопка продолжить, после которой нужно выводить эту span-data.

Как мне сделать клик в клике? Например код не сработает. Прошу помочь

$("#airports_next").click(function () {
  $('#country-list li').click(function (){
    var test = $(this).find('span').attr('span-data');
    alert (test);
  });
});