Problem running multiple instances of a plugin - jquery-plugins

Question

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.
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.
Plugin 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("<ul></ul");
$.each(data.dashboard, function(k,v) {
html = '<li>';
html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
html += '</a><p>'+v.OverlayText+'</p></li>';
$("ul",$("#"+elementId)).append(html);
});
},
"json"
);
}
});
}
Plugin Initialization/Execution
$("#this").testPlugin({
url: 'test.txt'
});
$("#that").testPlugin({
url: 'text.txt'
});
HTML
<div id="this" style="border-style: solid;border-color: #09f;padding: 10px;">
This is a sample div.
</div>
<div id="that" style="border-style: solid;border-color: #09f;padding: 10px;">
Another div
</div>
UPDATE
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 here. Now, help me do the same by retrieving the list from an AJAX request.
UPDATE 2
Thanks to Groovek, Here is a demo of the actual problem. You can notice, that the elements of both requests are append to the last element.

Answer 1

You're assigning to elementID without declaring it. This means it'll be a global variable, which means it'll always be equal to the last thing assigned to it (in this case, #that). If you just keep a local reference to the element, the code will work. Here's a modified jsfiddle: http://jsfiddle.net/s9BDT/
Code inside the each 'loop':
var el = $(this);
el.html("<ul></ul>");
options = $.extend(options,param);
if(options.url=="") { console.log("URL is not specified"); }
else {
$.post(
//options.url,
"/echo/json/",
{json:'{"dashboard":[{"TargetUrl":"toto.html", "Alt" : "sample 1", "ImageUrl":"toto.png", "OverlayText":"toto"},{"TargetUrl":"titi.html", "Alt" : "sample 2", "ImageUrl":"titi.png", "OverlayText":"titi" }]}'},
function(data) {
//alert(data.dashboard);
html = '';
$.each(data.dashboard, function(k,v) {
html += '<li>';
html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
html += '</a><p>'+v.OverlayText+'</p></li>';
});
//alert(html);
$("ul",el).append(html);
},
"json"
);
}