javascript - On change loading image not working for multiple element -

javascript - On change loading image not working for multiple element -

<script> $(document).ready(function() { $(".catclass").live("change", function(){ var whichcat = $(this).attr('id') var catid = $(this).val(); var url = 'ajaxcat.php'; //$('#tblloading').show(); if (whichcat == 'maincat') { var replacevar = 1; } else { var getcat = whichcat.split("|"); var replacevar = parseint(getcat[1]) + 1; } $( '#prod').hide(); document.getelementbyid('products').innerhtml = ''; (i = replacevar; <=5; i++) { $( '#cat'+i ).hide(); document.getelementbyid('scat|'+i).innerhtml = ''; } $.post(url, {'submit': true, 'pcat':catid, cache: true, prod : ''}, function(response) { if(response) { response = response.trim() if (response == 'no') { /*$.post(url, {'submit': true, 'pcat':catid, cache: true, prod = 'yes'}, function(response) { $( '#prod').show(); document.getelementbyid('products').innerhtml = response; });*/ getprodcuts(catid); } else { $( '#cat'+replacevar ).show(); document.getelementbyid('scat|'+replacevar).innerhtml = response; } } else { alert('please seek later'); } }); }); }); </script> <script> $( document ).ajaxstart(function() { var me = $(this); $( "#ajaxloadingimg",me).show(); }); $( document ).ajaxstop(function() { var me = $(this); $( "#ajaxloadingimg",me).hide(); }); </script> <div id="cat2" style="display:none"> <label>sub category</label><select name="scat2" id="scat|2" class="catclass"> </select><div id="ajaxloadingimg" style="display:none;">loading...</div> </div> <div id="cat3" style="display:none"> <label>sub category</label><select name="scat3" id="scat|3" class="catclass"> </select><div id="ajaxloadingimg" style="display:none;">loading...</div> </div> <div id="cat4" style="display:none"> <label>sub category</label><select name="scat4" id="scat|4" class="catclass"> </select><div id="ajaxloadingimg" style="display:none;">loading...</div> </div> <div id="cat5" style="display:none"> <label>sub category</label><select name="scat5" id="scat|5" class="catclass"> </select><div id="ajaxloadingimg" style="display:none;">loading...</div> </div> <div id="prod" style="display:none"> <label style="vertical-align:top; padding-top:8px;" >product</label><select name="products[]" id="products" multiple="multiple" > </select> </div>

=> loading not showing in ajax request instead showing first element. please help me. in advance. loading not showing in ajax request instead showing first element. please help me. in advance.

id unique identifier within page.

there should never 2 elements have same id. seek changing class, , utilize .ajaxloadingimg

change :

<div id="ajaxloadingimg" style="display:none;">

to :

<div class="ajaxloadingimg" style="display:none;">

javascript jquery html5 css3