Changing HTML elements order with Javascript

Hi,
I have created this design https://codepen.io/raul-rogojan/pen/ExmoVgm. At first, I was gonna display none of the elements that I don’t want to show. But that would change the container height and that foud makes it look very bad. Adding a fixed height to the container will let me with a bunch of empty space which is not very good for UX.

The current way this is working is also not very UX-friendly. What I would like do to is to bring the “selected-items” to the top. Those items are in an array so I tried this …:

“`
function showMenuItems() {
for (let i = 0; i < menuItems.length; i++) {
menuItems[i].classList.remove(“selected-items”);
if (currentImg.dataset.food != menuItems[i].dataset.menu) {
menuItems[i].classList.add(“selected-items”);
menuItems.push(menuItems[0]);
}
if (currentImg.dataset.food == “bestsellers”) {
menuItems[i].classList.remove(“selected-items”);
}
}
}
“`

also,

“`
function showMenuItems() {
for (let i = 0; i < menuItems.length; i++) {
menuItems[i].classList.remove(“selected-items”);
if (currentImg.dataset.food != menuItems[i].dataset.menu) {
menuItems[i].classList.add(“selected-items”);
menuItems.push(menuItems[0]);
}
if (currentImg.dataset.food == “bestsellers”) {
menuItems.push(menuItems[0]);
}
if (currentImg.dataset.food == “bestsellers”) {
menuItems[i].classList.remove(“selected-items”);
}
}
}
“`

Both of which do not work and also after saving the browser crashes.
Do you have any ideas of what I could try?
**sorry for missing imgs**

Also in #JavaScript _↴