Попытка использовать Skycons

Question

Я добавляю всю информацию о погоде, которую динамически получаю от darksky API. Проблема заключается в запуске кода через цикл for, у меня отображается только последний значок. Я получаю массив данных о погоде за недели, в течение которых я запускаю цикл for, и добавляю UUID к каждому элементу, и для каждого из этих элементов я использую метод skycons.add () с UUID и именем значка, которое возвращается из даркский API. Почему не все значки появляются?

for(let i = 1; i < dailyWeatherData.length; i++) {
            let id = uuidv4();
            this.output.innerHTML += `
            <div class="animated fadeIn delay-500ms card">
                <canvas id="${id}" height="128" width="128"></canvas>
                <h3>${moment.unix(dailyWeatherData[i].time).format("MMM DD, YY")}</h3>
                <p>${dailyWeatherData[i].summary}</p>
            </div>
            `;
            skycons.add(id, dailyWeatherData[i].icon);
        }