Estoy tratando de escribir una plantilla emergente que aparece y se cierra haciendo clic en los botones abrir y cerrar respectivamente. Funciona pero solo una vez. Supongo que esto se debe al método remove (), pero no entiendo cómo puedo manejarlo.

 const buttonOpenCards = document.getElementById('open-cards'); const buttonOpenPiano = document.getElementById('open-piano'); const portfolioSection = document.getElementById('portfolio'); const cardsText = 'this text describes project Flash Cards' const pianoText = 'this text describes project Virtual Piano' const cardsHeader = 'Flashcards' const pianoHeader = 'Virtual Piano' function createTemplate (text, header) { return `<div class="window"> <h2 id="pop-up-window-header">${header}</h2> <div id="pop-up-window-text-content"> <p class="window-text">You can see the project at the following link<a></a></p> <p class="window-text">${text}</p> </div> <button class="close-window">Close</button> </div>` } buttonOpenCards.addEventListener('click', () => { portfolioSection.innerHTML += createTemplate(cardsText, cardsHeader); const closeButton = document.querySelector('.close-window'); closeButton.addEventListener('click', () => { document.querySelector('.window').remove(); }) }) buttonOpenPiano.addEventListener('click', () => { portfolioSection.innerHTML += createTemplate(pianoText, pianoHeader); const closeButton = document.querySelector('.close-window'); closeButton.addEventListener('click', () => { document.querySelector('.window').remove(); }) })