The problem is that you are generating a single HTML within the cycle and, at the end, assign it to the two containers. The solution is very simple:Create an arrangement with both containersStart HTML within the cycle, before generating cardsFinally, you assign the HTML to the corresponding container/* funcion para agregar la info a las cards dinamicamente */
function cardsInfo(img, nombre, descripcion) {
this.img = `img/${img}.webp`;
this.nombre = nombre;
this.descripcion = descripcion;
/* genero precios random: */
let precio = Math.round(Math.random() * 700 + 100);
this.precio = `$${precio}`;
/* asigno id random por ahora, para pruebas, esas id van a servir para agrgar el producto al carrito */
let id = Math.round(Math.random() * 1000);
this.id = `${id}`;
};
/* creamos el contenido de las cards: */
const papasFritas = new cardsInfo("papas", "Papas Fritas", "Papas fritas con salsa especial de la casa.");
const nachos = new cardsInfo("nachos", "Nachos", "Nachos con salsa acida, barbacoa, cheddar y verdeo.");
const chocloFrito = new cardsInfo("choclo", "Choclo Frito", "Choclo frito con salsa especial de la casa.");
const burga1 = new cardsInfo("burga", "Burga 1", "burga con salsa especial de la casa.");
const burga2 = new cardsInfo("burga", "Burga 2", "burga con salsa especial de la casa.");
const burga3 = new cardsInfo("burga", "Burga 3", "burga con salsa especial de la casa.");
/* guardamos el contenido de cada card en un array */
let cardsBurgasArray = [burga1, burga2, burga3];
let cardsExtrasArray = [papasFritas, nachos, chocloFrito];
/* guardamos en otro array los array anteriores por si tenemos mas secciones html
que contengan cards: */
let cardsContainer = [cardsBurgasArray, cardsExtrasArray];
/* guardamos en variables los contenedores padre de las cards: */
const cardBurgas = document.querySelector(".card__container-burgas");
const cardExtras = document.querySelector(".card__container-extras");
// Crear un arreglo de contenedores para asociar con las cards
const containers = [cardBurgas, cardExtras];
/* hasta acá funciona todo bien, el problema es cuando entro al for, se me agregan las todas las cards a las 2 secciones, lo que yo quiero es que las cards guardadas en cardsBurgasArray se guarden en la seccion cardBurgas y las ars guaradas rn arsxtrasArray se guarden en la seccion cardExtras
puedo hacerlo por separado pero seria repetir codigo.. aiuda! /
/ creamos dinamicamente las cards: */
for (i = 0; i < cardsContainer.length; i++) {
// Inicializar código dentro del ciclo
let htmlCode = "";
for (cards in cardsContainer[i]) {
let card = cardsContainer[i][cards];
let img = card["img"];
let nombre = card["nombre"];
let descripcion = card["descripcion"];
let precio = card["precio"];
let id = card["id"];
htmlCode += <div class="card"> <img class="card__img" src="${img}" alt=""> <h3 class="card__h3">${nombre}</h3> <p class="card__content">${descripcion}<span class="card__precio">${precio}</span></p> <button class="card__button" id="${id}">Agregar al carrito</button> </div>;
};
// Asignar HTML a contenedor
containers[i].innerHTML = htmlCode;
} <section class="burgas" id="lasBurgas">
<article>
<div>
<h2 class="neon">- Las Burgas -</h2>
<div class="card__container-burgas">
</div>
</article>
</section>
<section id="extras">
<article class="extras">
<h2 class="neon">- Extras -</h2>
<div class="card__container-extras">
</div>
</article>
</section>
