Jquery is applied but not showing

Jquery is applied but not showing

You can see below that I call the function show_saved() twice. The first
one works but the one inside the jQuery,ajax does not.
Even though I set them up both the same witha dummy array. Both apply the
jquery( I cfan see it in the inspect elemnt tool of Chrome) but the 2nd
one does not display the hilights at all.
Other things like alerts work in the function, it's just the maphilight.
Any ideas?
<script type="text/javascript">
var already_done = [];
var saved_ids = [1,3,9,57,74];
show_saved(saved_ids);
jQuery.ajax({
type: "POST",
url: "php/check_data_added.php",
// data: "pupil_id=" + this.id + "&coords=" + this.coords,
// data: "code=" + code,
error: function () {
alert('SYSTEM ERROR -- NOT MY FAULT');
},
success: function (success) {
// alert('SUCCESS' +success);
already_done = success.split(":");
already_done.pop();
already_done.shift();
// alert('AD' + already_done);
saved_ids = [1,2,4,5,6,7,3,9,57,74]
show_saved(saved_ids);
} // end of function sucess
}) // end of jQuery.ajax
function show_saved(saved_ids) {
//var x =0;
alert('SAVED IDS' + saved_ids);
jQuery.each(saved_ids, function(index, value) {
//alert('X ' + saved_ids[x]);
//x++;
$('area#' +
value).attr('data-maphilight','{"fillColor":"ff0000","alwaysOn":true}');
});
};
</script>