Problem running multiple instances of a plugin

I developed a simple plugin to sent request t开发者_StackOverflow社区o 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.

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"
            );
        }