如何一键调用三个位置上javascript

Question

我正在尝试弄清楚如何使用JavaScript和开放天气来获取3个不同位置的3张卡的代码。 目前，我为JavaScript提供了这个。

function checkWeather() {
    var settings ={
        "async": true,
        "crossDomain": true,
        "dataType": "json",
        "url": "http://api.openweathermap.org/data/2.5/weather?zip=82190,us&appid=<API>&units=imperial",
        "method": "GET"
    };
    $.ajax(settings)

    .done(function (response) {
        console.log(response);

        $("#wind_speed").append (response.wind.speed);
        $("#main_temp").append (response.main.temp);
        $("#weather_conditions").append (response.weather[0].main);
        $("#wind_speed_unit").append (" MPH");
        $("#main_temp_unit").append (" F");
    });
}
function checkWeather() {
    var settings ={
        "async": true,
        "crossDomain": true,
        "dataType": "json",
        "url": "http://api.openweathermap.org/data/2.5/weather?zip=44405,us&appid=<API>&units=imperial",
        "method": "GET"
    };
    $.ajax(settings)

    .done(function (response) {
        console.log(response);

        $("#wind_speed1").append (response.wind.speed);
        $("#main_temp1").append (response.main.temp);
        $("#weather_conditions1").append (response.weather[0].main);
        $("#wind_speed_unit").append (" MPH");
        $("#main_temp_unit").append (" F");
    });
}
function checkWeather() {
    var settings ={
        "async": true,
        "crossDomain": true,
        "dataType": "json",
        "url": "http://api.openweathermap.org/data/2.5/weather?zip=44512,us&appid=<API>&units=imperial",
        "method": "GET"
    };
    $.ajax(settings)

    .done(function (response) {
        console.log(response);

        $("#wind_speed2").append (response.wind.speed);
        $("#main_temp2").append (response.main.temp);
        $("#weather_conditions2").append (response.weather[0].main);
        $("#wind_speed_unit").append (" MPH");
        $("#main_temp_unit").append (" F");
    });
}

对于HTML，

        <h2>Top National Parks Weather</h2>
        Check Weather
       
        <div class="card level-3 row" id="0">
        
        <h2>Yosemite National Park</h2>
        <span><b>Temperature: </b></span><span id="main_temp"></span><span id="main_temp_unit"></span><br />
        <span><b>Wind speed: </b></span><span id="wind_speed"></span> <span id="wind_speed_unit"></span><br />
        <span><b>Current conditions: </b></span><span id="weather_conditions"></span>
    </div>
    <div class="card level-3 row" id="1">
         
        <h2>Weather</h2>
        <span><b>Temperature: </b></span><span id="main_temp1"></span><span id="main_temp_unit"></span><br />
        <span><b>Wind speed: </b></span><span id="wind_speed1"></span> <span id="wind_speed_unit"></span><br />
        <span><b>Current conditions: </b></span><span id="weather_conditions1"></span>
    </div>
    <div class="card level-3 row" id="2">
       
        <h2>Weather</h2>
        <span><b>Temperature: </b></span><span id="main_temp2"></span><span id="main_temp_unit"></span><br />
        <span><b>Wind speed: </b></span><span id="wind_speed2"></span> <span id="wind_speed_unit"></span><br />
        <span><b>Current conditions: </b></span><span id="weather_conditions2"></span>
    </div>
    </div>

我尝试执行三组JS，但它与更改变量无效。这样做时，它会更改最后一张卡，并且不允许其他三个中的任何一个运行。我希望能够拉3个特定位置，然后在点击时显示当前的天气。我需要添加一个活动侦听器吗？