Tengo una base de datos SQL e hice un código php con jQuery que no mostrará ciertas fechas que ya están llenas, pero ahora quiero limitar el número de reservas por 1 período de tiempo en el mismo día.

Para aclarar, si una persona elige la fecha 1.3.2022 a las 17:00 y la envía, y esa se convierte en la quinta reserva en esa fecha y hora en la base de datos, la siguiente persona que elija la fecha 1.3.2022 ni siquiera tiene la opción de 17:00 en pantalla. Pero la primera siguiente opción sería a las 18:00. No tengo experiencia con js ya que estoy en php y esta parte es necesaria e inevitable para mí.

Esto es lo lejos que llegué:

 <script> var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'LOCALHOST', user : 'root', password : '', database : 'data' }); con.connect(function(err) { if (err) throw err; con.query("SELECT time from tbl_reservations WHERE date='var selectDate'", function (err,result,field) { if (err) throw err; console.log(result); }); });connection.end(); </script> <div class="form-field col-lg-6 "> <div class='input-group date' id='datetimepicker1'> <span class="input-group-addon"> <input type='text'class="form-control input-text js-input" id="date" name="date" onchange="return getDate()"/> </span> </div> <label class="label" for="date"></label> </div> <div class="form-field col-lg-6"> <select id="time" style="color:rgb(255,255,255,0.8)" class="input-text js-input" required> <option style="display:none">Time</option> <option id="16" value="16">16:00</option> <option id="17" value="17">17:00</option> <option id="18" value="18">18:00</option> <option id="19" value="19">19:00</option> <option id="20" value="20">20:00</option> <option id="21" value="21">21:00</option> </select> <script> function getDate(){ var selectDate = document.getElementById('date'); var userInput = selectDate.options(selectDate.selectedIndex).value } </script>