Где элементы находятся, как назначать им текст в зависимости от индекса контейнера:
const containers = document.querySelectorAll('.item');
const setTexts = (container, index) => container
.querySelectorAll('.card-item')
.forEach(n => n.textContent = `button ${-~index}`);
Назначаем:
// индекс передаётся в коллбек forEach'а
containers.forEach(setTexts);
// или, индекс отдаёт итератор entries
for (const [ i, n ] of containers.entries()) {
setTexts(n, i);
}
// или, можно самостоятельно обновлять значение переменной с индексом
for (let i = 0; i < containers.length; i++) {
setTexts(containers[i], i);
}
// и цикл для этого использовать не обязательно
(function next(i, n = containers.item(i)) {
n && (setTexts(n, i), next(i + 1));
})(0);
