Trouble rendering items from api feed

I am trying to display the latest and top stories on a single homepage using the hacker news API feed. I am using the .map so the code will loop over each story and display it all in a div with an id of output.

From what I am able to see I need to call the first API feed that will give me the day's top 500 results. The first API will only return story IDs as integers. I then need to make a 2nd API call using each story id from the original API call and map over it to get the corresponding data to each story to display on my site.

The code is working and the results are being displayed however when I switch between the latest stories and the top stories I keep getting different results at the top. Should I be using async and await somewhere In my code?

function getNewPosts() {
  document.getElementById('output').innerHTML = ``;
  fetch('https://hacker-news.firebaseio.com/v0/newstories.json?print=pretty')
    .then(response => response.json())
    .then(storyIds => {
      storyIds.map(function (id) {
        return (
          fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)
          .then(response => response.json())
          .then(story => {
            // Display time human readable
            let unixTimestamp = story.time;
            let milliseconds = unixTimestamp * 1000;
            let dateObject = new Date(milliseconds);
            let humanDateFormat = dateObject.toLocaleString();
            document.getElementById('output').innerHTML += `
          <div class="card mb-3">
            <h5 id="post-title" class="card-header data-title mb-1">${story.title}</h5>
            <div class="card-body">
              <p class="off-white-text mb-0">${story.type} by: ${story.by}</p>
              <p class="off-white-text mb-0">posted: ${humanDateFormat}</p>
              <p class="off-white-text mb-0">link to article:<a class="post-url" href="${story.url}" target="_blank"> Click here</a></p>
              </div>
          </div>
          `
          })
        )
      })
    })
}

function getTopPosts() {
  document.getElementById('output').innerHTML = ``;
  fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty')
    .then(response => response.json())
    .then(storyIds => {
      storyIds.map(function (id) {
        return (
          fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)
          .then(response => response.json())
          .then(story => {
            // Display time human readable
            let unixTimestamp = story.time;
            let milliseconds = unixTimestamp * 1000;
            let dateObject = new Date(milliseconds);
            let humanDateFormat = dateObject.toLocaleString();
            document.getElementById('output').innerHTML += `
          <div class="card mb-3">
            <h5 id="post-title" class="card-header data-title mb-1">${story.title}</h5>
            <div class="card-body">
              <p class="mb-0 off-white-text">${story.type} by: ${story.by}</p>
              <p class="mb-0 off-white-text">Posted: ${humanDateFormat}</p>
              <p class="mb-0 off-white-text">Link to article:<a class="post-url" href="${story.url}" target="_blank"> Click here</a></p>
              </div>
          </div>
          `
          })
        )
      })
    })
}

The user is able to switch between the top and newest posts by clicking on a button for each on the homepage

    <!-- Action buttons -->
    <div class="row">
      <div class="col-12 col-md-12 text-center">
        <button id="getPosts" class="btn my-1" onclick="getNewPosts()">Read Latest News</button>
        <button id="getPosts" class="btn my-1" onclick="getTopPosts()">Read Top News</button>
        <button id="getPosts" class="btn my-1" onclick="clearNews()">Reset All News</button>
        <hr class="text-white">
      </div>
    </div>

Thanks for any help in advance