my 3 hourly forecast data is not reflecting on my hd have shown all the able forecast

I am on my first JavaScript project and I am building a weather app.

I was able to extract the 3 hourly forecast Data but it is only showing the first data. Like only 21:00 data in my html but the rest is not reflecting. It should have shown all the able forecast data.

While writing my html I wrote 6 elements that are responsible for holding the forecast data but I actually needed 8. So I created the forecast item as a way of creating the remaining html. I am meant to add it by the forecast container.innerHTML += forecast item. I didn’t do that yet because only 1 of the 6 I already had showed the forecast data. What I want is for the 3 hourly forecast data to automatically reflect in the html for every 24 hours

async function getForecast() {
  try {

    // const citySearch = document.getElementById('search-city').value;
    const apiKey = 'APIKEY';
    const forecastFullUrl = `https://api.openweathermap.org/data/2.5/forecast?q=Dudley&appid=${apiKey}&units=metric`;

    console.log('fetching forecast URL:', forecastFullUrl)
    const forecastResponse = await fetch(forecastFullUrl)
    const forecastData = await forecastResponse.json()
    console.log(forecastData);

    displayCurrentForecastData(forecastData.list);
  } catch (error) {
    console.error('error fetching hourly forecast data:', error);
    alert('Failed to fetch hourly forecast data');
  }
}
getForecast();

function displayCurrentForecastData(forecastList) {


  // compare today date with the date in the dorecast data and return only the ones that matches today's date

  const currentDate = new Date();
  const currentDateStringToShowOnMainPage = currentDate.toISOString().split('T')[0];
  // to make the date on the main page be the current date
  document.getElementById('current-date').textContent = currentDateStringToShowOnMainPage;

  //  to only shown current day's weather forecast
  const currentDayForecast = forecastList.filter((forecast) => {

    const time = new Date(forecast.dt * 1000)
    const forecastDateString = time.toISOString().split('T')[0];
    return forecastDateString === currentDateStringToShowOnMainPage;
  })


  // this to make  more html children since i only created 6 spaces in th e html for the 3 hours weather details
  const forecastContainer = document.getElementById('selected-hour-details')
  // forecastContainer.innerHTML = '';

  currentDayForecast.forEach((forecast, index) => {

    const forecastItem = document.createElement('div');
    forecastItem.className = 'selected-hour-details';
    const time = new Date(forecast.dt * 1000)
    const timeString = time.toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit"
    });

    const temp = forecast.main.temp;
    const description = forecast.weather[0].description;
    const icon = `http://openweathermap.org/img/wn/${forecast.weather[0].icon}`;

    // to update the 3 hourly html with the forecast details

    document.querySelector('.forecasttime').textContent = timeString;
    document.querySelector('.forecasttemp').textContent = `${temp}°C: ${description}`;
    document.querySelector('.weather-icon').src = icon;

    // /create more spaces

    forecastItem.innerHTML = `
              <span class="forecasttime">${timeString}</span>
              <img class="weather-icon" src="${icon}" alt="weather icon"/>
              <span class="forecasttemp">${temp}°C: ${description}</span>
            `
    forecastContainer.innerHTML += forecastItem;
  })
}

<div class="selected-hour-weather-details" id="selected-hour-weather-details">

  <div class="specific-hours">
    <span class="forecasttime">00:00</span>
    <img class="weather-icon" src="" alt="weather icon"/>
    <span class="forecasttemp">4°</span>
  </div>

  <div class="specific-hours">
    <span class="forecasttime">01:00</span>
    <img class="weather-icon" src="" alt="weather icon"/>
    <span class="forecasttemp">5•</span>
  </div>

  <div class="specific-hours">
    <span class="forecasttime">02:00</span>
    <img class="weather-icon" src="" alt="weather icon"/>
    <span class="forecasttemp">5•</span>
  </div>

  <div class="specific-hours">
    <span class="forecasttime">03:00</span>
    <img class="weather-icon" src="" alt="weather icon"/>
    <span class="forecasttemp">5•</span>
  </div>

  <div class="specific-hours">
    <span class="forecasttime">04:00</span>
    <img class="weather-icon" src="" alt="weather icon"/>
    <span class="forecasttemp">5•</span>
  </div>

  <div class="specific-hours">
    <span class="forecasttime">05:00</span>
    <img class="weather-icon" src="" alt="weather icon"/>
    <span class="forecasttemp">5•</span>
  </div>
</div>