css - Multiple spinners without the use of multiple functions

Question

I am using a loading icon for my Ajax functions as follows :

div id='loader' style="display: none;" align="right">
     <img src="assets/img/ajax-loader.gif"/>
</div>


complete: function(){
    $('#loader').hide();
},
beforeSend: function(data) { 

    $('#loader').show();
 },

However If I want to have multiple spinners on the same page I will normally needs to have many divs e.g

div id='loader2' style="display: none;" align="right">
    <img src="assets/img/ajax-loader.gif"/>
</div>
div id='loader3' style="display: none;" align="right">
    <img src="assets/img/ajax-loader.gif"/>
</div>

etc ..

Is there a way to do this somewhat dynamically so I don't have to define every each of them ?

Answer 1

Rather than targeting by ID, you can just look for .loader within some unique HTML scope. For example:

complete: function(){
  $(this).parents('.some-class').find('.loader').hide();
},

beforeSend: function(data) {
  $(this).parents('.some-class').find('.loader').show();
},