So i have this function:

export function Home() {
 const moduleContainer = document.createElement("div");
 const uiContainer = document.querySelector("#ui-container");
 uiContainer.innerHTML = "";
 moduleContainer.id = "module-container";
 moduleContainer.classList.add("module-container", "min-height");
 const removeStats = statsUI(gameState.player, uiContainer);
 const removeInv = inventory(gameState.player, uiContainer);
 const battleBossButton = createButton("Boss", "Batalla", ()=>{
    Battle(bossMonsters.squeletonKing, "Pradera");
 });
 const battleButton = createButton("Mob", "Batalla", ()=>{
    Battle(monsters.goblin, "Montaña");
 });
 const shopButton = createButton("Shop", "Tienda", ()=>{
    Shop();
 });
 moduleContainer.appendChild(battleButton);
 moduleContainer.appendChild(battleBossButton);
 moduleContainer.appendChild(shopButton);
 mainContainer.appendChild(moduleContainer);
}

The first time i run this function everything works fine but when i (using a different function) empty the mainContainer and rerun this function the moduleContainer doesn't get appended again, the thing is that if i console.log the moduleContainer it does have the buttons inside of it, but the mainContianer doesen't have anything inside, i'm not sure what is going on, any ideas?

To clarify what i mean i took this screenshot

as you can see the first time it runs the dom looks correct the second time main container has nothing inside.

EDIT: Main container is defined in a constants file and exported like this export const mainContainer = document.querySelector("#main-container"); Also createButton function comes from a helper file and looks like this

export function createButton(text, id, callback) {
 const button = document.createElement("button");
 button.id = id;
 button.classList.add("btn", "btn-custom");
 button.innerText = text;
 button.addEventListener("click", () => callback());
 return button;
}