[jQuery] Problem for calling ajaxStart and ajaxStop

[bookme]

Hi,

I am trying to call tow times $.ajax  request using type: "POST" for
different actions on same page.
For this I am showing a loader image on  ajaxStart and hiding on
ajaxStop. I am using different id for diffrent functions but when I
call any one ajax request other's loading image also showing.

My mean to say that ajaxStart  and ajaxStop function are not working
for their respectively ids.

1) first Function call

<span id="id_add_fav"><a href="#" onclick="addFavourite(); return
false;">Add to Favorite</a></span>

<span id="id_fav_loading"><img src="loader.gif" /></span>

        jQuery('#id_fav_loading').ajaxStart(function() {
       jQuery(this).show();
       jQuery('#id_add_fav').hide();
  }).ajaxStop(function() {
      jQuery(this).hide();
      jQuery('#id_add_fav').show();
  });

2)  second function call

<span id="id_add_ptoo"><a href = "#" onclick = "problemToo();return
false;" > too</a></span>

<span id="id_problem_too_loading"><img src="loader.gif" /></span>

  jQuery('#id_problem_too_loading').ajaxStart(function() {
       jQuery(this).show();
       jQuery('#id_add_ptoo').hide();
  }).ajaxStop(function() {
      jQuery(this).hide();
      jQuery('#id_add_ptoo').show();
  });

like example;  when I call problemToo(); (second function) then loader
image is displaying on both places. while it must be display for only
"id_problem_too_loading.

Can any one tell me whats my mistake here.

Thanks!