javascript - CSS not changing after altering data attribute tag with AJAX post -

i designing website shows availability of resource using either green or red colour indicator based upon availability field of connected mysql database table.

the item looking alter span element:

 <span class="equipment" data-id="1" data-available="1" data-location="0-0"></span> 

this being parsed jquery data attributes availability , location, , compared mysql database ajax post note changes in availability should propagated webpage, changing colour of indicator per below css.

.equipment[data-available='1'] {  background-color: rgb(0,226,0); //green  }  .equipment[data-available='0'] {  background-color: rgb(226,0,0); //red  } 

the ajax request, seen below, recognizes changes database , returns php file successfully, returning new availability (0 or 1). if console.log() php post url, value returned equipment_span.data("available") , stored in old_avail appears have updated new value desired after database change occurs. however, changes aren't reflected in colour change indicator.

function update_avail() {      $('.equipment').each( function () {         var equipment_span = $(this);          var old_avail = equipment_span.data("available");         var loc = equipment_span.data("location");          $.post('avail.php?a='+old_avail+'&l='+loc, function(new_avail) {             if(new_avail != old_avail) {               equipment_span.data("available", new_avail);               }         })     }) } 

if offer pointers going wrong, great has been annoying me hours @ stage.

it because of line:

equipment_span.data("available", new_avail); 

when jquery manages data attributes in memory , not "on page", if inspect page show data-available="whatever on page load"

you need do:

equipment_span.attr("data-available", new_avail);