JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 Date:
<input type="text" id="datepicker">

JavaScript

$(function() {
  //ajax call better placed here.
  /* Commented out just for JsFiddle, uncomment this for live version.
  $.getJSON('checkDates.php?dld=' + id, function(json) {
    dates = json;


    $("#datepicker").datepicker({
      dateFormat: 'dd-mm-yy',
      beforeShowDay: checkAvailability

    });
  });
  */
  //For JsFiddle ONLY remove this section of code for live version.
  dates = [{
    "dates": "21-08-2018"
  }, {
    "dates": "31-08-2018"
  }, {
    "dates": "31-03-2018"
  }, {
    "dates": "30-03-2018"
  }];
  $("#datepicker").datepicker({
    dateFormat: 'dd-mm-yy',
    beforeShowDay: checkAvailability

  });
  //End for JsFiddle
});
//Id is not defined. This may be something you just missed in the post.
//$.getJSON('checkDates.php?dld='+ id, function(json){dates=json;});



function checkAvailability(mydate) {


  var myBadDates = dates;

  var $return = true;
  var $returnclass = "available";
  $checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
  //Here we do a quick indexOf check


  // start loop


  for (var x in myBadDates) {
    console.log(x);
    if (myBadDates[x].dates == $checkdate) {
      $return = false;
      $returnclass = "unavailable";
    }
    /*
  			 $myBadDates = new Array( myBadDates[x]['start']);	

  			   for(var i = 0; i < $myBadDates.length; i++)
  				
  				 if($myBadDates[i] == $checkdate)
  				   {
  					    $return = false;
  				            $returnclass= "unavailable";
  				   }
  			  */


  } //end loop



  return [$return, $returnclass];
}