How to implement jquery map highlight with alwaysOn?

See more:

HTML

jQuery

<script type="text/javascript">
    jQuery(function()
    {
        var tableContent = '<span>Select Floor</span><span></span><span></span><span style="float:right;padding-top:-10px;"><a href="#"><img class="no_link" style="max-width: 30px;opacity:0.4;" src="images/navigation_icon.png"</a><br></span>';
        jQuery('#tableContent').html(tableContent);
        jQuery('.appt_floors').click(function(e)
        {
            var id = jQuery(this).attr('id');
            //jQuery('.appt_floors').not("area[id=" + id + "]").data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
            jQuery('.appt_floors').not("area[id=" + id + "]").data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
                jQuery.ajax(
                {
                    url:"table_content1.php?id="+id,
                    type:"POST",
                    dataType:"JSON",
                    success:function(data)
                    {
                        for (var i = 0; i < jQuery(data).length; i++)
                        {
                            var tableContent = '<span>Floor '+ data[i].appt_floor +' - </span><span>'+ data[i].configs_available +'</span><span> - '+ data[i].appt_status +'</span><span style="float:right;padding-top:-10px;"><span><a href="http://hauskart.com/mobile/floor'+id+'.php"><img style="max-width: 30px;" src="images/navigation_icon.png"</a></span>';

                            jQuery('#tableContent').html(tableContent);
                        }
                    }
                });

        });
    });
    </script>

My map areas

<map name="simple">


<area shape="poly" coords="836,638,837,624,833,624,834,597,813,596,813,537,834,532,690,526,635,523,497,517,420,535,384,533,347,545,300,558,250,573,280,574,278,620,250,626,249,632,249,658,382,639,489,630" id="1" class="appt_floors" data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:2,&quot;fillColor&quot;:&quot;ff0000&quot;,&quot;fillOpacity&quot;:0.6}">

 <area shape="poly" coords="834,532,834,520,831,520,832,493,811,492,810,430,834,421,689,412,638,409,496,400,421,428,386,426,348,443,303,463,255,485,282,487,281,532,252,541,250,548,249,572,347,545,384,533,421,534,495,518,636,523,689,525,834,532" id="2" class="appt_floors" data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:2,&quot;fillColor&quot;:&quot;90d558&quot;,&quot;fillOpacity&quot;:0.6}">
 <area shape="poly" coords="834,422,833,314,824,314,689,302,639,298,492,284,476,293,422,323,388,319,350,342,304,369,255,398,283,399,283,441,254,454,252,486,301,464,348,443,387,426,422,428,489,403,498,400,638,410,765,417,834,420" id="3" class="appt_floors" data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:2,&quot;fillColor&quot;:&quot;90d558&quot;,&quot;fillOpacity&quot;:0.6}">
 <area shape="poly" coords="832,315,831,208,820,209,688,194,639,188,493,172,477,183,423,218,390,215,256,312,285,314,285,346,257,364,254,371,254,397,304,369,388,320,424,323,492,285,640,298,688,302,832,316" id="4" class="appt_floors" data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:2,&quot;fillColor&quot;:&quot;fff000&quot;,&quot;fillOpacity&quot;:0.6}">

<area shape="poly" coords="831,208,829,97,478,50,459,47,357,136,258,223,260,231,287,234,286,256,258,279,256,286,256,313,389,215,425,218,493,173,651,190,831,210" id="5" class="appt_floors" data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:2,&quot;fillColor&quot;:&quot;90d558&quot;,&quot;fillOpacity&quot;:0.6}">

</map>

Initially, all the areas are highlighted.When I click on one area, it should be highlighted and other areas should be disabled.With the above code, only the first click works. If I click any other area, nothing is highlighted.How can I solve this issue?