Performing an ajax call to a drinks api and I've nested a loop to pull the ingredients out and render them to the page. The nested loop consoles the ingredients correctly but when I use jquery to append the results to the page only the item in the last index is displayed. I know there are null values I was going to remove them with an if statement after I got them to show.

function displayDrinkData(drinkName) {

var queryURL = "https://thecocktaildb.com/api/json/v1/1/search.php?s=" + drinkName

$.ajax({
    url: queryURL,
    method: "GET"
}).then(function (response) {
    console.log(response);

    var results = response.drinks;

    for (var i = 0; i < results.length; i++) {

        console.log(results[i]);

        var eachDrink = results[i];

        var drinkDiv = $("<div>");

        var drinkName = results[i].strDrink;

        for (var k = 1; k < 16; k++) {

            console.log(eachDrink['strIngredient' + k]);

            var ingList = $("<ul>").text("Ingredients: " + eachDrink['strIngredient' + k])              

        }

        var pOne = $("<p>").text("Drink name: " + drinkName);

        var drinkInstructions = results[i].strInstructions;

        var pTwo = $("<p>").text("Instructions: " + drinkInstructions);
        var drinkImage = $("<img>");

        drinkImage.attr("src", results[i].strDrinkThumb);

        drinkDiv.append(pOne);
        drinkDiv.append(ingList);
        drinkDiv.append(pTwo);
        drinkDiv.append(drinkImage);

        $("#drinks-view").append(drinkDiv);
    }

})

}