setInterval on Axios get and Update Output Without Repeating

Question

I am making a leaderboard and trying to update the axios get call every 10 seconds. Using setInterval this is achieved however how do you replace the output rather than repeating the output. https://codepen.io/zepzia/pen/YzPMLLK?editors=1010

<ol id="list"></ol>

const apiOne = 'https://jsonplaceholder.typicode.com/posts';
const list = document.querySelector('#list');

const apiCall = () => {
  axios.get(apiOne)
    .then(resp => {      
      resp.data.forEach(item => {
        let output = `<li class="item">${item.title} - ${item.id}</li>`;
        list.innerHTML += output;
      })
    })
}

apiCall();
setInterval(() => apiCall(), 10000)

Answer 1

After getting response from your API you need to clear list by calling:

list.innerHTML = '';

You can check also other answers in this thread - How do I clear the content of a div using JavaScript?

Updated codepen