2nd flashed message cant be closed?

Question

Im creating a social media website, if i flash two messages on the screen, the close button only works on the first one, i can click it and it closes the message, but then when i click on the other one, for some reason it just doesnt work at all. my code is below if anyone knows the reason why or how to fix it, thanks

CSS

.hide {
    display: none;
}
.alerts {
    z-index: 1;
    position: fixed;
    display: flex;
    flex-direction: column;

    width: calc(100% - 3rem);
    max-width: 1000px;
    left: 50%;
    transform: translateX(-50%);
}

.alert {
    z-index: 1;
    color: white;

    margin: .5rem 0px;
    margin-top: 1rem;
    padding: 1.5rem;
    border-radius: 3px;
    box-shadow: 0px 5px 15px -2px rgba($color: #000000, $alpha: .6);
    backdrop-filter: blur(1px);
    width: 100%;

    text-transform: uppercase;
    justify-content: space-between;

    &-success {
        background-color: rgba(81, 158, 81, 0.8); 
    }

    &-error {
        background-color: rgba(238, 67, 67, 0.8);
    }

    &-info {
        background-color: rgba(87, 152, 243, 0.6);
    }

}

HTML

<div class="alerts">
        {% with messages = get_flashed_messages(with_categories=true) %} {% if
        messages %} {% for category, message in messages %}
        <div class="alert alert-{{ category }} flex flex-ai-c">
          <span>{{ message }}</span>
          <button id="close-alert" class="btn-close"></button>
        </div>
        {% endfor %} {% endif %} {% endwith %}
</div>

JS

$(function () {
   $("#close-alert").on("click", function () {
     $("#close-alert").parent().addClass("hide");
   });
});