Используйте переменную для JQuery селектора элемента

Question

У меня есть поле ввода для ввода названия города - функция нажатия, которая заполняет определенные div. Я хочу, чтобы локальное хранилище каждого ввода (возможно, в массиве) и каждое входное значение динамически создавалось в кнопку. Кнопки являются вводом названия города - при нажатии этих кнопок данные div будут заполнены названием этого города и его информацией. Я сохраняю ввод города в качестве переменной и использую это название города как id каждой кнопки. Так как же я могу использовать переменную в качестве моего селектора запросов?

HTML

<div class="city-search">Search For A City: 
            <input type="text" id="cityInput" style="text-transform: uppercase" />
            <button class="searchBtn" type="submit"><span class="oi oi-magnifying-glass"></span></button>

</div>

<!-- This shows the search history and is reclickable -->
<div class="city-history" id="city-history">

</div>

<div>
    <h2 id="city"></h2>
</div>

JQuery

$(".searchBtn").on('click', function getWeather () {
    var cityName = $('#cityInput').val().toUpperCase();
    $("#city").text("The weather in " + cityName);

 // Create buttons for city inputs
    var cityHistory = function() {
        var cityH = document.createElement("button");
        cityH.textContent = cityName;
        cityH.setAttribute("id", cityName);
        var history = document.getElementById("city-history");
        history.appendChild(cityH);
     }
    cityHistory();
 // Update city name with name on button
 $(`#${cityName}`).on('click', function historyWeather () {
      $('#city').text("The weather in " + cityName);
});

Answer 1

Эта скрипка достигает того, что вы хотите. Как упоминалось в комментариях, вы используете селектор идентификаторов, когда у целевого элемента есть только класс. Изменение $('#city') на $('.city') будет работать. Селекторы классов в jQuery являются ., а селекторы ID - #. Они не являются взаимозаменяемыми.