Как скрыть временной интервал даты, если он выбран другим пользователем?

Question

Я использую Spring STS, Java, Javascript, HTML, MySql

Я создаю веб-приложение, в котором пациенты могут записываться на прием. Однако я создаю приложение, в котором на странице отображаются доступные слоты.

В настоящее время существует две таблицы.

Таблица 1: показывает доступные слоты, которые отображаются в раскрывающемся списке для выбора пользователями на странице HTML.

id | date & time        | booked
1. | 20/05/2020 - 09:00 | 0
2  | 20/05/2020 - 09:20 | 0

Таблица 2: в этой таблице сохранена встреча после ее выбора.

id | date & time.       | user  
1. | 20/05/2020 - 09:00 | ab123

Как видите, пользователь ab123 выбрал первую дату и время. Следовательно, забронированный столбец должен возвращать true и должен быть равен 1.

Я знаю, что используется запрос

UPDATE table1, table2
SET table1.booked = true
WHERE table1.date = table2.date

Однако я не могу сделать это с кодом Java. Я не использовал JQuery раньше вместе с AJAX и PHP, поэтому мне нужна ваша помощь.

После того, как забронировано значение true, я бы хотел, чтобы этот слот был отключен, чтобы другой пользователь не мог его выбрать.

MySQL был настроен через Spring Boot. Значения сохраняются в базе данных вставки в таблицу 2 из метода контроллера в моем контроллере.

Мой текущий HTML код выглядит следующим образом:

   <h1> Make your Appointments</h1>
   <tr>
            <td><form:label path="dateList">Date</form:label></td>
            <td>
            <form:select path="dateList">
            <c:forEach var="dateList" items="${dateValues}">
                    <option value="${dateList}">${dateList}</option>
            </c:forEach>
        </form:select>
        </td>
    </tr>

       <tr>
            <td><form:label path="doctor">Doctor</form:label></td>
            <td>
            <form:select path="doctor">
            <c:forEach var="doctor" items="${doctorValues}">
                    <option value="${doctor}">${doctor}</option>
            </c:forEach>
        </form:select>
        </td>
    </tr>

    <tr><th>Reason</th><td><input type="text" name="reason"></td></tr>

         <tr><th> Prefer not to say </th><td><input type="checkbox" id="reason" name="reason" value="Prefer not to say"> </td></tr>

    <tr>
        <td colspan="2">
            <input type="submit" value="Add" name="add" class="btn btn-default"/>
        </td>
        <td colspan="2">
            <input type="submit" value="Cancel" name="cancel" class="btn btn-default"/>
        </td>

    </tr>

</table>  
</form:form>
</div>