Fetch data from db into a HTML form

Question

I'm new to PHP and SQL, so I'm doing a booking form. So far it POST's into a database but the only thing missing is to show the available dates and hours for the appointments in the selector at the beginning of the form, and for those dates to be unselectable once booked by other user. I've already tried to do it by XMLHttpRequest but i haven't been able to make it work.

I've already create a table in the DB in which the available dates are stored, this is the structure. When the date-time it's available the state is 1, otherwise is 0.

https://drive.google.com/file/d/1ZqYAA-JZy0ed87KNuMzN7B326jhYuw3V/view?usp=sharing

This is my HTML form

<form class="needs-validation col-sm-11 col-md-6 col-lg-6 col-xl-6" style="border: solid black; padding:10px; border-radius: 5px; border-width: 1.5px; box-shadow: 5px 5px 5px rgb(0 0 0 / 0.2);" novalidate>


  <label for="exampleFormControlInput1" style="color:#9eb33e;"><b>Fecha y hora en que desea la charla</b></label>
  <div class="row">
    <div class="col-sm-6">
      <label for="exampleFormControlSelect2">Selecciona la fecha charla</label>
      <select multiple class="form-control" id="exampleFormControlSelect2" name="fecha">
        <option disabled="true"><b>--MARZO--</b></option>
        <option>2022-03-24</option>
        <option>2022-03-25</option>
        <option disabled="true"><b>--ABRIL--</b></option>

      </select>
    </div>
    <div class="col-sm-6">
      <label for="exampleFormControlSelect2">Selecciona hora de la charla</label>
      <select multiple class="form-control" id="exampleFormControlSelect2" name="hora">
        <option disabled="true"><b>--MARZO--</b></option>
        <option></option>
        <option>00:00:00</option>
        <option>12:00:00</option>
        <option disabled="true"><b>--ABRIL--</b></option>

      </select>
    </div>

  </div>

  <label for="exampleFormControlInput1" style="color:#9eb33e;"><b>Datos de la persona encargada</b></label>

  <div class="row">

    <div class="col-sm-6">
      <label for="exampleFormControlInput1">Nombres</label>
      <input type="text" class="form-control" placeholder="" name="nombre" required>
      <div class="invalid-feedback">
        Por favor escriba los nombres de la persona encargada
      </div>

    </div>


    <div class="col-sm-6">
      <label for="exampleFormControlInput1">Apellidos</label>
      <input type="text" class="form-control" placeholder="" name="apellido" required>
      <div class="invalid-feedback">
        Por favor escriba los apellidos de la persona encargada
      </div>
    </div>



  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="exampleFormControlInput1">Correo electrónico</label>
        <input type="email" class="form-control" name="email" placeholder="name@example.com" required>
        <div class="invalid-feedback">
          Por favor provea un correo electrónico valido
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="exampleFormControlInput1">Número de contacto</label>
        <input type="text" class="form-control" name="numero" placeholder="+57 --- --- ----" required>
        <div class="invalid-feedback">
          Por favor provea un número de contacto (Celular o fijo)
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="exampleFormControlInput1">Nombre del colegio</label>
        <input type="text" class="form-control" id="exampleFormControlInput1" name="colegio" required>
        <div class="invalid-feedback">
          Por favor escriba el nombre del colegio al que representa
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="exampleFormControlInput1">Número aproxmado de estudiantes</label>
        <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="" name="numest" required>
        <div class="invalid-feedback">
          Por favor provea un número de estudiantes aproximados a asistir
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing" required>
        <label class="custom-control-label" for="customControlAutosizing" style="margin-left:15px;">Acepto
                        la política de tratamiento de datos</label>

        <div class="invalid-feedback">
          Es necesario aceptar la política de tratamiento de datos
        </div>
      </div>
    </div>
  </div>


  <div class="button-area">
    <button type="submit" class="btn btn-primary col-sm-12" style="background:#9eb33e; border-color:#9eb33e;">Enviar</button>
  </div>

</form>

This is the JS code

const form = document.querySelector("form"),
statusTxt = form.querySelector(".button-area");

form.onsubmit = (e)=>{
    e.preventDefault()
    
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "public/php/registro.php",true);
    xhr.onload = ()=>{
        if(xhr.readyState == 4 && xhr.status == 200){
            let response = xhr.response;
            console.log(response);
        }
    }
    let formData = new FormData(form);
    xhr.send(formData);
 }
 

And this is the PHP that controls it

include_once 'conect_db.php';


$fecha = $_POST['fecha'];
$hora = $_POST['hora'];
$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$email = $_POST['email'];
$numero = $_POST['numero'];
$colegio = $_POST['colegio'];
$numest = $_POST['numest'];


if(!empty($fecha) && !empty($nombre) && !empty($apellido) && !empty($email) && !empty($numero) && !empty($colegio) && !empty($numest)){
$reciever = "adol2299@gmail.com";
    $subject = "Mensaje de $nombre: Nueva cita UNaspirante.";
    $body = "Datos de la persona encargada:/n Nombre:$nombre/n Apellido:$apellido/n Correo Electronico:$email/n Numero de contacto:$numero/n Colegio:$colegio/n Numero de estudiantes:$numest/n FECHA:$fecha/n. HORA:$hora/n";
    $sender = "$email";
    
    $consulta = "INSERT INTO UNaspirante_form(nombre, apellido, email, numero, colegio, num_estudiantes, fecha_seleccionada, hora_seleccionada) VALUES ('$nombre','$apellido','$email','$numero','$colegio','$numest','$fecha','$hora')";
    $resultado = mysqli_query($mysqli , $consulta);
    
    
    if($resultado){
        echo "Tu info ha sido enviada";
    }else{
        echo "Tu info NO ha sido enviada";
    }
    
}else{
    echo "no se pudo enviar el mensaje";
}

?>``` 

**Thanks in advance for all the help**


  [1]: https://i.stack.imgur.com/M74PD.png