title: How to add value to var when clicking?
body: <p>I have this code:</p>
  
  <pre><code>function maintenance_text(e) {
  
  var toop = 0;
  
      $('body')
  
      .before('&lt;div class="maintenance_text" style="position: relative; top: '+toop+'px; left: 0px; right: 0px; z-index: 999999; background: black; color: white; font-size: 16px; cursor: default;"&gt;'+e+'&lt;/div&gt;')
  
      .before(function() {
  
          $('.maintenance_text')
          .delay(3000)
          .fadeOut(function() {
              $(this).remove();
          });
  
      });
  
  };
  </code></pre>
  
  <p>and this code for work:</p>
  
  <pre><code>&lt;a href="#" onclick="javascript: maintenance_text('TEST'); return false;"&gt;Click here...&lt;/a&gt;
  </code></pre>
  
  <p>and all works great, but I want get this effect when this div is fixed (not relative). But when it is fixed, then all "messages" is on one position and I want get every message under prev message, like on relative position.</p>
  
  <p>I trying add toop var and add 10px every when function are run, but I do not know what to do it.</p>
  
  <p>Relative teest:
  <a href="http://jsfiddle.net/IdolwSzutrab7/9zJvL/4/" rel="nofollow">http://jsfiddle.net/IdolwSzutrab7/9zJvL/4/</a></p>
  
  <hr>
  
  <p>Edit: and I want to reset the toop position when all mesages disappear, exactly the same as when this div is relative.</p>