Q: Bootstrap notification - Rapidly calling method causes notifications to freeze on screen I have an HTML button that calls a function to make a bootstrap notification appear on the screen. There is also a built-in jQuery method to make the notifications fade after 1 second.
The method works fine, but if I call the method(i.e click the button) in rapid succession, the notifications seem to "freeze" on the page and the page must be refreshed to remove the frozen notifications. 
I have tried tinkering with various jQuery event handlers that will allow all of the visible notifications to eventually fade after a certain period of time. Nothing I have tried so far has worked the way I need it to. 
Here is the JS method that is tied to the button click, makes the notification appear, and makes it fadeOut. 
function showDiv() {
    let div = document.createElement("div");
    div.innerHTML = '<div id="newAlert" class="alert alert- 
    info">Hello</div>'
    document.body.appendChild(div);
   $("#newAlert").delay(1000).fadeOut("slow", function() {
   $("#newAlert").remove();
});
}

I want to set this up so that no matter how many times I fire that method, each notification that appears will fade after 1 second. Any recommendations on how I can go about fixing this would be greatly appreciated. Thank you

A: The problem is the id is the same with all of them. This is a terrible idea but should work. 
function showDiv() {
    let div = document.createElement("div");
    let id = new Date().getTime();
    div.innerHTML = `<div id="${id}" class="alert alert-info">Hello</div>`
    document.body.appendChild(div);
    setTimeout(() => {
        $("#"+id).fadeOut("slow", function() {
          $("#"+id).remove();
        });
    }, 1000)

}


A: There is no need in id at all. Object reference already exist. Also jQuery allows to do everything in a single statement. Something like this.


function showDiv() {
  $("<div/>")
    .html('<div class="alert alert-info">Hello</div>')
    .appendTo('#notif')//or body
    .delay(1000).fadeOut("slow", function() {
      $(this).remove();
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="showDiv()">show</button>
<div id="notif"></div>


