Not able to close dynamically created popups with EventListener attached to close button? - popup

Question

I created a custom popup at a fixed position on a Leaflet map. When clicking a marker i'm able to close the popup and open another one by clicking a different marker. However, when I don't close the popup by clicking the close button and instead click another marker the popup content changes but I'm no longer able to close the popup by clicking the close button, it is stuck. How to solve this?
// Custom marker
var redFlag = L.icon({
iconUrl: 'images/mapmarker2.png',
iconSize: [34, 34],
iconAnchor: [17,34]
});
//geoJSON data, stored in 'art' variable
const myLayer = L.geoJSON(art, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: redFlag});
},
onEachFeature: function ( feature, layer) {
layer.on('click', function(e){
var getWrap = document.getElementById('mapid');
var wrap = getWrap.appendChild(document.createElement('div'));
wrap.className = 'wrapper';
wrap.style.backgroundColor = '#fff';
wrap.innerHTML =
`<div class="close">X</div>`+
`<div class="popUpContent" style="background-color:#e8f4ff">` +
`<div class='pic'><img src =
"images/${feature.properties.image}"></div>`+
`<div class="puName"><span
class="puName">${feature.properties.name}</span><br>`+
`<span class="puTitle">"${feature.properties.title}"</span> <br>`+
`<div class="extra3">${feature.properties.extra}</div></div>`+
`</div>`;
if(!feature.properties.title){
wrap.innerHTML =
`<div class="close">X</div>`+
`<div class="popUpContent" style="background-color:#e8f4ff">` +
`<div class='pic'><img src =
"images/${feature.properties.image}"></div>`+
`<div class="puName"><span
class="puName">${feature.properties.name}</span><br>`+
`<div class="extra3">${feature.properties.extra}</div></div>`+
`</div>`;
}
// EventListener attached to close button
document.querySelector('.close').addEventListener('click', closePopup);
function closePopup(e){
if(document.querySelector('.wrapper').style.display = 'block'){
document.querySelector('.wrapper').remove();
}
}
});
}
});
mymap.addLayer(myLayer)