2 Loading GIFs

2 Loading GIFs

Hi all. Brand new at jQuery and trying to get a few things going, so please excuse my ignorance here.

I have a page with 2 places where users can load content with 2 different menus. So I have 2 sets of buttons and 2 div I load content into. I have 2 different div that I have a loading gif as well. Everything works fine, I mean the load works like it should, but when one button is clicked, both loading gifs display, and the same on the other buttons. Only the content I want loads, but both loading indicators display. I use:
$(document).ready(function() {
$('#loading1').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});

});

$(document).ready(function() {
$('#loading2').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});

});


What needs to be different to make just the one loading gif display as intended?