jquery datepicker changing unavailable dates in one instance

$('#datepicker').focus(function(){
    //alert($('#name').html());
     $.ajax({                                      
    url: 'getDates.php',                  
    data: "artist_id="+$('#name').html(),                       
    dataType: 'json', 
    async: false,            
    success: function(data)          
    {
               unavailableDates = data;
    } 
    });

"basically when user selects an option (here they want to book artists so \
when user selects an artist), the unavailable dates of datepicker are 
updated   automatically." 

On Artist Changed
    -Disable date picker, possibly add a small note next to it / under it / 
       over it that it is loading
    -Start ajax call with async true
    -In ajax success function, re-enable the picker and remove the message.

<td><input type="text" id="MyDate" name="MyDate" readonly='true' value="click here" /></td><td><input type="button" id="button" name="button" value="Select date"></td></td>

AjaxGet = function () {
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'unavail_dates',
            unavaildates: '2'
        },
        success: function (output) {
            dates = jQuery.parseJSON('["'+output+'"]');
            mySuccessCallback( dates );
            console.log ( dates );
        }
    });
};

function mySuccessCallback(dates) {
    array = dates
    jQuery('#MyDate').datepicker({
        minDate: '+2',
        maxDate: new Date(2014, 1,28),
        dateFormat: 'dd-mm-yy',
        beforeShowDay: function(date) {
            var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
            return [ array.indexOf(string) == -1 ];
        },
        onSelect: function(dateText) {
            jQuery(this).change();
        }
    }).change(function() {
        if (document.getElementById('date_error_row').style.visibility == 'visible') {
            document.getElementById('date_error_row').style.visibility = 'hidden';
        }
        var postid = '<?php echo esc_js($posted_id); ?>';
        var pdate = jQuery(this).val(); //Select updated value

        jQuery.ajax({
            type:"POST",
            url: "/wp-admin/admin-ajax.php",
            data: {action: 'tempsave', postid: postid , postdate: pdate , status: 'waiting'},
            success:function(data){
                jQuery("#feedback").html(data);
            }
        });
        jQuery('#MyDate').datepicker('destroy');
    });
    jQuery('#MyDate').datepicker('show');
}

jQuery('#button').click(function() {
    AjaxGet();
});

function compareDate(str1, sep){
var dt1   = parseInt(str1.split(sep)[0], 10);
var mon1  = parseInt(str1.split(sep)[1], 10);
var yr1   = parseInt(str1.split(sep)[2], 10);
var date1 = new Date(yr1, mon1-1, dt1);
return date1;
}

function setMaxDate()
{
    var date = $("#from").val();
    for(var i=0; i<unavailableDates.length; i++)
    {
    if(compareDate(date, "/")<compareDate(unavailableDates[i], "-")) 
        return compareDate(unavailableDates[i], "-");
    }
    return null;
}

$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: unavailable,
        numberOfMonths: 1,
        dateFormat: 'dd/mm/yy',
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
            $( "#to" ).datepicker( "option", "maxDate", setMaxDate() ); // Added This
        }
    });

    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: unavailable,
        numberOfMonths: 1,
        dateFormat: 'dd/mm/yy',
        maxDate: setMaxDate(),    // Added This
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

var unavailableDates = ["9-8-2017", "14-8-2017", "15-8-2017", "16-8-2017", "17-8-2017", "18-8-2017"];

function available(date) {
  var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();

  if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, "", "Available"];
  } else {
    return [false, "", "unAvailable"];
  }
}

$('#date').datepicker({
  beforeShowDay: available
});

<input type="text" name="date" id="date" readonly="readonly" size="12" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">