How to hide THIS element when I click THIS element’s close button (with multiple elements)

I have an alert box that has its own close button. I didn’t know users would be placing multiple instances of it on a web page.

Currently, when the close button of an element is clicked, only the first instance gets hidden. I can’t close the other one after that. When I click its close button, nothing happens.

I want to be able to click each element’s close button to hide that element and have the ability to hide the elements one at a time. I feel like it has something to do with the THIS keyword, but I’m not sure.

Here’s my JavaScript code. Can anyone please help? Thank you.

const alert = document.querySelector('#dcom-c-alert');
const hideAlert = document.querySelector('.dcom-c-close-alert-wrapper');

function closeAlert() {
    alert.classList.add('hide');
}

hideAlert.addEventListener('click', function () {
    closeAlert();
});

hideAlert.addEventListener("keydown", e => {
    // ADA: Next button activates with spacebar or enter key
    if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
        closeAlert();
    }
});