jQuery - Ajax loading icon

Hi everyone,

Here I have four dynamic lists : http://baiadesign.com/files/tuts/tutorial_01/

The first list CATEGORY1 contains items of the database table CATEGORY1.

Selecting one of those items reloads the second list CATEGORY2 with subcategories belonging to the selected CATEGORY1. I hope that makes sense … !

And the same with the following lists.

My problems is that I want an Ajax loading icon appearing on all lists below the one the user just selected. If a CATEGORY1 is selected I want a loading icon appearing on CATEGORY2, 3 and 4.

If CATEGORY2 is selected I want a loading icon on CATEGORY3 and 4.

For now I have this code :

    $('#category1').ajaxStart(function() {
        }).ajaxComplete(function() {
    $('#category2').ajaxStart(function() {
        }).ajaxComplete(function() {
    $('#category3').ajaxStart(function() {
        }).ajaxComplete(function() {

It works only when selecting CATEGORY1 and only once !

Any ideas ?