title: jQuery setTimeout $this.remove() Overlapping for Multiple Elements
body: <p>I have 2 separate <code>&lt;div&gt;</code> elements that have a similar <code>invoke</code> button which adds a transparent overlay message. My issue is that when I click both buttons in rapid succession, or the same button twice before the timeout expires, the overlay is only removed once (instead of stacking with however many overlays are added). I would appreciate any help in solving this problem, as well as if someone can help me tidy up my code (it seems grossly inefficient).</p>
  
  <blockquote>
    <p>JSFiddle: <a href="http://jsfiddle.net/Hybridx24/733ueao4/" rel="nofollow">http://jsfiddle.net/Hybridx24/733ueao4/</a></p>
  </blockquote>
  
  <pre><code>$(document).on('click', '#invoke', function(e) {
  
      $this = $(this);
  
      $cardOverlay = $("&lt;div style='transition: background 0.2s linear' class='card-overlay'&gt;&lt;span style='color:white;position:relative;top:40%;font-weight:bold'&gt;Success!&lt;/span&gt;&lt;/div&gt;");
  
      $this.parent('.card-shadow').append($cardOverlay);
  
      $cardOverlay.height('100%').css({
          'opacity' : 1,
          'position': 'absolute',
          'top': 0,
          'left': 0,
          'background': 'rgba(0, 0, 0, 0.6)',
          'width': '100%',
          'z-index': 1,
          'border-radius': '6px',
          'text-align': 'center'
      });
  
      setTimeout(function() {
          $cardOverlay.fadeOut("normal", function(){
              $(this).remove();
          })
      }, 2000)
  });
  </code></pre>