how to stop multiple notifications changing positions?

Question

i have a small notifications problem, when i insert a element the position of first element is changing so i wanna make it when the element is inserted the first last notification still in same position until it delete itself Video showing the problem

i call this function when i will insert a notification into phone

function createNotify(image, title, detail, time, color, iconColor) {
        var random = Math.floor(Math.random() * 10000) + 1;
        var htmlse = "";
        htmlse +=
            `<div id="${random}" style="background-color: ${color}"class="notification-container not-the-call">
              <div class="app-bar">
                <div class="icon" style="color: ${iconColor};">${image}</div>
                <div class="name">
                  <p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextPrimary"
                    style="word-break: break-word;">${title}</p>
                </div>
                <p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextPrimary"
                  style="word-break: break-word;">${time}</p>
              </div>
              <div class="content">
                <div class="text">
                  <p class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary"
                    style="word-break: break-word;">${detail}</p>
                </div>
                
              </div>
            </div>`
        $('.top-notifications-wrapper').append(htmlse)
        
        $(function () {
            $(".not-the-call").click(function() {
                var removed = $(this)
                for (i = 0; i < removed.length; i++) {
                    removed[i].style.animation = "cometopaparevers 0.5s";
                    setTimeout(function() {
                        for (i = 0; i < removed.length; i++) {
                            removed[i].innerHTML = "";
                            removed[i].remove();
                        }
                    }, 499)
                }
            });
        })
        setTimeout(function() {
            var topNotifyReversVar = document.getElementById(random);
            topNotifyReversVar.style.animation = "cometopaparevers 0.5s";
            setTimeout(function() {
                topNotifyReversVar.innerHTML = "";
                topNotifyReversVar.remove();
            }, 499)
        }, 3300)
    };

and this css

.top-notifications-wrapper {
    width: 100%;
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    z-index: 200;
    opacity: 1;
    top: 24px;
}
.top-notifications-wrapper>.notification-container {
    background-color: rgba(53, 49, 52, .95);
     width: calc(100% - 32px);
    height: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    color: #c8c6ca;
    cursor: pointer;
    margin-bottom: 4px;
    opacity: 1;
    -webkit-animation: cometopapa;
    animation: cometopapa;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    transform: translateY(0);
}
.top-notifications-wrapper-mounted {
    pointer-events: all;
    z-index: -1;
}

and this html

<div class="notify-wraper">
                     <div class="top-notifications-wrapper top-notifications-wrapper-mounted" style="max-height: 80px;"></div>
                  </div>