title: how to use settimeout, to remove dynamically appended elements according to their append time
body: <p>I need help regarding <code>settimeout</code> function.
  I made a little plugin, that append 'li' based on specifix parameter.</p>
  
  <p>Like</p>
  
  <pre><code>div ({'div':'noo','auto':'true','pos':'top','txt':'hello'});
  
  function div(obj) {
      obj.div;
      obj.auto;
      obj.pos;
      obj.txt;
      obj.time;
      if(obj.pos == 'top') {
          $('&lt;ul id="top"&gt;&lt;/ul&gt;').appendTo('body');
      }
      if(obj.pos == 'bottom') {
          $('&lt;ul id="bottom"&gt;&lt;/ul&gt;').appendTo('body');
          $(obj.div).append('&lt;li data-name="' + $.now() + '"&gt;' + obj.txt + '&lt;/li&gt;');
          if(!obj.time) {
              obj.time = 6000;
          }
          if(obj.auto == 'true') {
              setTimeout(function () {
                  $(obj.div + ' li').fadeOut();
              }, obj.time);
          }
      }
  }
  </code></pre>
  
  <p>Now, the problem with this code is, if I append a li after few seconds <code>setTimeout (function (){div ({'div':'bottom','auto':'true','pos':'bottom'});}, 3000);</code>, than both LIs fadeout at same time (<code>obj.time</code>).</p>
  
  <p>I want that, all appended LIs must complete their respective <code>obj.time</code> before fadeout.</p>
  
  <p>I also tried to add attr "data-name" on all appended LIs with current time, but dont know how to store all data-name and retrive then into setTimeout function.</p>
  
  <p>Sorry for typo mistakes</p>