JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
        <label>* Profissional:</label>
        <select class="form-control2" name="profissional" id="profissional">
          <option>Selecione uma região</option>
        </select>
        
      </div>

             <div class="form-group" id="checkbox">
     
        <label>Tipo de Exame Complementar:</label>
        <label class="checkbox"></label>
        
        <input type="checkbox" name="clin" value="clinico" >Clinico
        <input type="checkbox" name="ped" value="pediatria" >Pediatria
        <input type="checkbox" name="derm" value="dermatologista" >Dermatologista
       
      </div>   
      <div class="form-group">
        <label>* Horários Disponíveis:</label>
        <select class="form-control2" name="horarios" id="horarios">
          <option>Selecione um profissional</option>
        </select>
        
      </div>

JavaScript

$(document).ready(function(){
	
	//região que popula dados em profissional
	 $('#regiao').bind('change', function(){
		  $.ajax({
			 type: "POST",
			 url: "teste2.php",
			 data: {regiao: $("#regiao").val()},
			 dataType: "json",
			 success: function(json){
				var options = "";
				$.each(json, function(key, value){
				   options += '<option value="' + key + '">' + value + '</option>';
				});
				$("#profissional").html(options);
			 }
		  });
	   });
	   
	   
	  // profissional e checkbox populando horário
	  
	  $('#checkbox').on('click', function() {
		  
	  $.ajax({
         type: "POST",
         url: "teste4.php",
      
	     data: {
			 checkbox: $("#checkbox")[0].checked?$("#checkbox").val():'',
			 profissional: $("#profissional").val()
             clin:$("#clin")[0].checked?$("#clin").val():''
             ped:$("#ped")[0].checked?$("#ped").val():''
             clin:$("#derm")[0].checked?$("#derm").val():''
         },
		 
         dataType: "json",
         success: function(json){
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#horarios").html(options);
         }
      });
   }); 
	   
	   
	   
	
	$('#profissional').bind('change', function(){
      $.ajax({
         type: "POST",
         url: "teste3.php",
         data: {profissional: $("#profissional").val()},
         dataType: "json",
         success: function(json){
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#horarios").html(options);
         }
      });
   });
	   	
	});