Trying to create a notification popup... The notification overlaps the divs underneath it even after fadeTo()?

Trying to create a notification popup... The notification overlaps the divs underneath it even after fadeTo()?

I’m trying to create a notification popup (similar to YouTube’s when you add a video to your watch-later or something). This is my attempt:  ( jsfiddle here )
  1. $('#notification-box').hide();

  2. $('body').on("click", "#enableSuspension", function(){
  3.   $('#notification-box').append('<p>Client suspension enabled.</p>').fadeTo(1000, 1, function(){
  4.         $('#notification-box, #notification-box p').fadeTo(1000, 0);
  5.     });
  6. });

However, it doesn’t function well at all. I want each individual notification to stay visible for 1 second and then fade out. Currently, if you click the button a couple times after each other, all the notifications fade out at once, they don't wait in a 'queue' for the next one to stay visible for 1 second.

Also, the notifications are not really hiding when I call this method

  1. fadeTo(1000, 0, callback) 
and I figured that out when I tried clicking the button after about 5 clicks. It's like something is between the cursor and the button. So I tried remove() as the function callback, but then the notification wouldn’t appear the next time the button is clicked. I thought fadeOut() is equivalent to the css property "display:none"?

Can anyone tell me where I’m going wrong in trying to make this function work the way YouTube’s does?