Quiero llenar mi sitio web con mis elementos de db, y tiene que ajustarse a mi plantilla: dos animales en una línea, si hay un número impar de animales, el último es uno en la línea.

¿Cómo debo hacer que la función fillResults tome dos animales de la iteración y se los dé a addAnimalsMen que llena mi plantilla?

 function findAnimals(gender, catteryStatus, websiteVisibilityStatus) { $.ajax({ url: "/admin/api/animals?" + prepareUrl(gender, catteryStatus, websiteVisibilityStatus), type: "get", dataType: "json", contentType: "application/json" }) .done(function (response) { fillResults(response, gender); }) .fail(function(jqxhr, textStatus, errorThrown){ displayErrorInformation(jqxhr.responseText); }); } function fillResults(response, gender) { $("#records_animals_man").empty(); var animals = response; if(gender == 'M'){ var counter = 0; animals.forEach(function(animal){ counter++; if(counter%2 != 0){ var firstAnimal = animal; } else if(counter%2 == 0){ var secondAnimal = animal; } addAnimalsMen(firstAnimal, secondAnimal); }); } } function addAnimalsMen(firstAnimal, secondAnimal) { $('#records_animals_man').append( '<div class="rounded bg-light shadow-sm my-5 p-3 text-center">' + '<div class="form-row text-center">' + '<div class="col-md-2"></div>' + prepareAnimalToShow(firstAnimal) + prepareAnimalToShow(secondAnimal) + '</div>' + '</div>' ); } function prepareAnimalToShow(animal){ return '<div class="col-md-4 col-sm-10 col-xs-12 p-4 ml-4 text-center text-secondary border justify-content-center">' + '<span><strong>' + animal.lineageName + '</strong></span><br><br>' + prepareImageToShow(animal.image.imageFileName) + '<br><br><span>' + animal.websiteDescription + '</span><br><br>'+ '</div>'; }