my fetch works perfectly with .then, but i want to step it up a notch by using `async` and `await`. It should wait for all 5 API calls, and then place the answer, instead, it shows answer on every API call

```js
async function getPhotosFromAPI() {
  for (let i = 1; i <= 5; i++) {
    let albums = await fetch(
      `https://jsonplaceholder.typicode.com/photos/?albumId=${i}`
    );
    let result = await albums.json();
    let res = `<div class="album${i}"></div>`;
    document.querySelector(".display-images").innerHTML += res;
    for (let j = 1; j <= 5; j++) {
      document.querySelector(
        `.album${i}`
      ).innerHTML += `<img src="${result[j].url}"/>`;
    }
  }

  console.log(result);
}
async function showPhotos() {
  await getPhotosFromAPI();
  document.getElementById("#loader").style.display = "none";
}
showPhotos();
```

```js
document.getElementById("img").style.display = "block";
for (let i = 1; i <= 5; i++) {
  fetch(`https://jsonplaceholder.typicode.com/photos/?albumId=${i}`)
    .then((response) => response.json())
    .then((json) => {
      document.getElementById("img").style.display = "none";

      const display = document.querySelector(".display-images");
      const albumNo = document.querySelector(".album-no");
      //   document.getElementById('img').style.display = "block";
      // document.getElementById('img').style.display = "none";]
      display.innerHTML += `<div class="album-${i}>`;
      for (let z = 1; z <= 5; z++) {
        display.innerHTML += `<img id="img" alt="pic-from-album${json[i].albumId}" src="${json[z].url}"/>`;
      }
      display.innerHTML += `<div>`;
    });
}
```