I am trying to figure out how to get the code to populate weather for 3 cards for 3 different locations using javascript and open weather. Currently, I have this for 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");
    });
}

and this for 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>

I tried to do three sets of js but it did not work with changing variables. When doing so it changes the last card and does not allow any of the other three to function. I would like to be able to pull 3 specific locations and then be able to display the current weather upon the click. Do I need to add an event listener?