title: Problem running multiple instances of a plugin
body: <p>I developed a simple plugin to sent request to a JSON text file, retrieve a data containing image list and append the html in the element calling the plugin.</p>
  
  <p>Now, the code is working fine while it is running on only one element, but when I am using it on more than one element, now the elements get loaded on the last element calling the plugin only.</p>
  
  <p>Plugin Code:</p>
  
  <pre><code>$.fn.testPlugin = function(param) {
      var options = {
          url : "",
          pause : 2000,
          callback : 5000
      };
      this.each(function() {
          elementId = $(this).attr("id");
          options = $.extend(options,param);
          if(options.url=="") { console.log("URL is not specified"); }
          else {
              $.post(
                  options.url,
                  function(data) {
                      $("#"+elementId).html("&lt;ul&gt;&lt;/ul");
                      $.each(data.dashboard, function(k,v) {
                         html = '&lt;li&gt;';
                         html += '&lt;a href="'+v.TargetUrl+'" target="'+v.Target+'"&gt;';
                         html += '&lt;img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" /&gt;';
                         html += '&lt;/a&gt;&lt;p&gt;'+v.OverlayText+'&lt;/p&gt;&lt;/li&gt;';
                         $("ul",$("#"+elementId)).append(html);
                      });
                  },
                  "json"
              );
          }
      });
  
  }
  </code></pre>
  
  <p>Plugin Initialization/Execution</p>
  
  <pre><code>$("#this").testPlugin({
      url: 'test.txt'
  });
  $("#that").testPlugin({
      url: 'text.txt'
  }); 
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="this" style="border-style: solid;border-color: #09f;padding: 10px;"&gt;
  This is a sample div.
  &lt;/div&gt;
  
  &lt;div id="that" style="border-style: solid;border-color: #09f;padding: 10px;"&gt;
  Another div
  &lt;/div&gt;  
  </code></pre>
  
  <h2>UPDATE</h2>
  
  <p>I also found out that the problem is happening due to AJAX request. If I create static list and then append it on the div, this time this works with any number of instantiation. A demo of static call is <a href="http://jsfiddle.net/Starx/KKPU4/" rel="nofollow">here</a>. Now, help me do the same by retrieving the list from an AJAX request.</p>
  
  <h2>UPDATE 2</h2>
  
  <p>Thanks to Groovek, <a href="http://jsfiddle.net/Starx/KKPU4/13/" rel="nofollow">Here</a> is a demo of the actual problem. You can notice, that the elements of both requests are append to the last element.</p>