Using async .ajax within .each loop

Using async .ajax within .each loop

I have been googling around about this for quite awhile without any definite answer.

Here is the code I am having a problem with:
  1.     var $m = {'id1':'page1.html','id2':'page2.html'};
        /* load modules */
        $j.each($m, function($key, $value){
         $j('#'+$key).html($loading);
         $j.ajax({
          url:'proxy.php',
          type:'post',
          data:'module='+$value,
          context:$j('#'+$key),
          dataType:'html',
          success: function($response){
           $j('#'+$key).html($response);
          }
         });
        });













The problem is that the second XMLHttpRequest response does not get displayed. If using firebug for debugging you can see that two separate responses are returned from the server both with the correct HTML data. The first item gets displayed on the page however the second item never gets displayed.

Some of the things I have read when searching for similar problems indicate a problem with the div id changing prior to the success callback.

Can anyone shed some light on this?