не могу правильно анимировать и убрать элемент из динамического списка

Есть такой HTML

<div class="page__webazex-messages-container" id="w-parent">
    
</div>

После jQuery через делаю следующее:

$(document).ready(function(){
    var price = $('#price').html(); //получил цену
    var PriceInt = price.replace(/\s/g, ''); //убрал пробел
    function ShowMeNewPrice(PriceInt){ //общая функция которая вызывается ниже в setInterval
        var NewPrice = "8501"; //тестовое значение
        let message = '<div class="webazex-messages-container__message">Цена выросла</div>';
        //функция добавления уведомления и анимирования
        function adding(){
            $('#w-parent').append(message);
            $('.webazex-messages-container__message').last('webazex-messages-container__message').css({'display':'flex'});
            $('.webazex-messages-container__message').last('webazex-messages-container__message').addClass('show');

            var audio = new Audio('alert.mp3');
            audio.play();
        }
        //функция удаления уведомления и анимирования
        function removing() {
            $('.webazex-messages-container__message:nth-child(1)').removeClass('show');
            $('.webazex-messages-container__message:nth-child(1)').addClass('hide');
            $('.webazex-messages-container__message:nth-child(1)').remove();
        }
        //функция проверки количества уведомлений
        function checking(){
            if($('#w-parent .webazex-messages-container__message').length>4){
               removing(); //вызываем удаление
            }
        }
        //ниже проверяю больше ли новая цена чем текущая и если да - то вызываю вышеописанные функции
        if(PriceInt < NewPrice){
            if($('#w-parent').is(':hidden')){
                $('#w-parent').css({'display':'flex'});
                checking();
                adding();
            }else{
                checking();
                adding();
            }
        }else{
            console.log("www");
        }
    }
    //делаю вышеописанную проверку каждые 3 секунды
    setInterval(function(){
        ShowMeNewPrice(PriceInt);
    }, 3000)
});

Проблема конкретно в функции удаления уведомления, визуально выглядит все так как будто последнее уведомление исчезает сразу же после добавления (хотя селектор по идее смотрит на первое уведомление). Должно быть следующим образом: идет анимация первого уведомления, а после при помощи remove() - оно удаляется. При том если закомментить эту строку

$('.webazex-messages-container__message:nth-child(1)').remove();

то анимация вроде как есть и работает

.page__webazex-messages-container {
    position: fixed;
    bottom: 5px;
    right: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
.webazex-messages-container__message {
    position: relative;
    background: #2dc0e8;
    width: 100%;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Open Sans',sans-serif;
    display: none;
    left: 200px;
    transition: all, 2s, ease-in;
}
.webazex-messages-container__message:last-child() {
    margin-bottom: 0px;
}
/*=====animate==css====webazex===*/
@keyframes showMessage {
    0% {
        left: 200px;
        opacity: 0;
    }
    50% {
        left: 100px;
        opacity: 0.5;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}
@keyframes hideMessage {
    0% {
        left: 0px;
        opacity: 1;
    }
    50% {
        left: 100px;
        opacity: 0.5;
    }
    100% {
        left: 200px;
        opacity: 0;
    }
}
.show {
    animation: showMessage 2s linear;
    transition: all, 2s, ease-in;
    /*display: block;*/
    animation-fill-mode: forwards;
}
.hide {
    animation: hideMessage 2s linear;
    transition: all, 2s, ease-in;
    animation-fill-mode: forwards;
    background: red;
    display: block;
}