通过For循环创建HTML不能完全正常工作

Question

这是我的代码：

let info = document.getElementById('info');
let week = document.getElementById('week');

        /*Initializer Function*/
        window.addEventListener('load', () => {
            let long;
            let lat;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    long = position.coords.longitude;
                    lat = position.coords.latitude;

                    const proxy = 'https://cors-anywhere.herokuapp.com/';
                    const api = `${proxy}https://api.darksky.net/forecast/d571a1e2483b31605b94edaae84c647e/${lat},${long}`;

                    let xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (this.readyState === 4 && this.status === 200) {
                            let obj = JSON.parse(this.responseText);
                            console.log(obj);
                            document.getElementById('temperature-degree').innerHTML = obj.currently.apparentTemperature;
                            document.getElementById('location').innerHTML = obj.timezone;
                            document.getElementById('temperature-description').innerHTML = obj.currently.summary;
                            setIcons(obj.currently.icon, document.getElementById('currentDayIcon'));
                            for (let i = 0; i < obj.hourly.data.length; i++) {
                                info.innerHTML += `<div id='hour${i + 1}' class='hourly'>` + `<canvas id='hourIcon${i + 1}'></canvas>` + `<h3 id='hourTemp${i + 1}'></h3>` + `<p id='hourSummary${i + 1}'></p>` + '</div>';
                                setIcons(obj.hourly.data[i].icon, document.getElementById(`hourIcon${i + 1}`));
                                document.getElementById(`hourTemp${i + 1}`).innerHTML = obj.hourly.data[i].temperature;
                                document.getElementById(`hourSummary${i + 1}`).innerHTML = obj.hourly.data[i].summary;
                            }
                            for (let i = 0; i < 5; i++) {
                                week.innerHTML += `<div id='day${i + 1}' class='daily'>` + `<canvas id='dayIcon${i + 1}'></canvas>` + `<h2 id='dayTemp${i + 1}'></h2>` + `<p id='daySummary${i + 1}'></p>` + '</div>';
                                setIcons(obj.daily.data[i].icon, document.getElementById(`dayIcon${i + 1}`));
                                document.getElementById(`dayTemp${i + 1}`).innerHTML = obj.daily.data[i].temperatureMax;
                                document.getElementById(`daySummary${i + 1}`).innerHTML = obj.daily.data[i].summary;
                            }
                        }
                    };
                    xhr.open("GET", api, true);
                    xhr.send();
                });
            }
            function setIcons(icon, iconId) {
                const skycons = new Skycons({color: 'white'});
                const currentIcon = icon.replace(/-/g, '_').toUpperCase();
                skycons.play();
                return skycons.set(iconId, Skycons[currentIcon]);
            }
            ;

        });

...问题是当涉及到加载和显示图标时，它只是最后一个实际显示的图标。我不知道问题是什么，因为如果最后一次成功了，那么对于前一个47应该成功了，因为最后一次是第48次相同的迭代。有什么想法吗？