How to update HTML created with insertAdjacentHTML method based on a select option?

I am fetching data and then creating an HTML content which is displayed at page start.

I have a select dropdown list with different options that would then sort the array of objects from the API and should then update the HTML content with the new order. Right now I'm getting the sorted array correctly but the HTML content is just being added after the already existing one.

What am I missing or doing wrong?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const container = document.querySelector('.container');
const sort= document.querySelector('.sort');
let url = 'https://mocki.io/v1/11356aa2-6371-41d4-9d49-77a5e9e9924f';
function getTours(option = false) {
fetch(url)
.then(res => res.json())
.then(out => {
switch(option) {
case 'durasc':
out.sort((a,b) => a.length - b.length)
break;
case 'durdesc':
out.sort((a,b) => b.length - a.length)
break;
case 'prasc':
console.log("Lowest price first");
break;
case 'prdesc':
console.log("Highest price first");
break;
default:
out;
console.log(option);
}
console.log(out);
out.forEach((el,i) => {
const cities = el.cities;
const lastCity = cities.slice(-1)
const dates = el.dates.map(d => d.start);
let availableSpaces = el.dates.map(d => d.availability);
const fromPrice = dates.length!==0 ? Math.min(...el.dates.map(item => item.eur)) : 0;
const month = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEPT", "OCT", "NOV", "DEC"];
const getDate = function (date) {
if (date!==undefined) {
const d = new Date(date)
const day = d.getDate();
const name = month[d.getMonth()]
const year = d.getFullYear()
const fullDate = `${day} ${name} ${year}`;
return fullDate;
} else {
availableSpaces = ['No', 'No'];
return 'SOLD OUT!'
}
}
let image = el.images.filter(img => img.is_primary===true);
image.length>0 && image[0].hasOwnProperty('url') && image[0].url!=='' ? image = image[0].url : image = "https://media.istockphoto.com/id/1357365823/vector/default-image-icon-vector-missing-picture-page-for-website-design-or-mobile-app-no-photo.jpg?s=612x612&w=0&k=20&c=PM_optEhHBTZkuJQLlCjLz-v3zzxp-1mpNQZsdjrbns=";
const operatorName = el.operator_name;
const html = `Here is my HTML text`;
container.insertAdjacentHTML('beforeend', html);
});
});
}
let listOne = document.getElementsByClassName('sort')
for (let i = 0; i < listOne.length; i++) {
let option = listOne[i];
option.addEventListener('change', () => {
getTours(option.value);
return option.value;
})
}
getTours();

<!-- end snippet -->

If i understand correctly you want to:

1. retrieve data
2. sort based on option
3. display sorted data

Step 1 and 2 seem to work but your newly sorted data get's appended to the already existing data?

If that is the case, you never seem to clear your container element.

IMPORTANT a mistake I usually make is typing X innerHtml instead of innerHTML <- all caps

console.log(out) // line 26-ish

// clear the container
container.innerHTML = ''

// your out.foreach loop

I've included a snippet to show what the change would do, hopefully it's what you're looking for!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const sorted = [1,2,3,4]
const cont = document.querySelector('ul')
const addElements = () => {
sorted.forEach(e => {
let html = `<li>${e}</li>`
cont.insertAdjacentHTML('beforeend', html)
})
}
const addElementsClean = () => {
cont.innerHTML = '';
addElements();
}

<!-- language: lang-html -->

<button onclick='addElements()'>add w/o clean</button>
<button onclick='addElementsClean()'>add clean</button>
<ul>
<li>dummy</li>
<li>elements</li>
</ul>

<!-- end snippet -->