I'm trying to write popup template that appears and closes by clicking open and close-buttons respectively. It works but only once. I suppose this is because of the remove () method, but i don't understand how I can handle it.

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();
    })
})