Используя jquery / bootstrap, сохраняйте данные без использования флажков

Я создаю функцию расписания, которая показывает с понедельника по пятницу и список времени по умолчанию, который можно выбрать для встреч на 3 месяца подряд.

Каждый пользователь может выбирать до двух раз в день. У них также есть возможность выбрать свой вариант, чтобы выбрать другое время встречи. Также они могут выбрать «Нет понедельника», чтобы сказать, что в этот день им не нужны встречи.

Проблема, с которой я столкнулся, заключается в том, что я не хочу, чтобы пользователи могли выбирать время с помощью флажка / радио. Им просто нужно нажать на отображаемое время / Выбрать, чтобы выбрать время.

Как мне добиться этого, чтобы я мог взять эти данные и сохранить их в своей базе данных.

Я прикрепил макет как изображение ниже.

Заранее спасибо.

У меня есть форма с использованием PHP, и когда пользователь нажимает на 05: 00a - 8: 00a

tag, i am using jquery to update the value of hidden input with id= monday1 with 05:00a - 8:00a. But when a user tries multiple appointments, I am confused how to save the second appointment. Also how do i deselect an appointment when they make edits?? Which would be a cleaner way to do this??

<form action = "" method = "post">
    <input type = "hidden" id = "monday1" name = "monday1" value = "">
    <input type = "hidden" id = "monday2" name = "monday2" value = "">
    <input type = "hidden" id = "tuesday1" name = "tuesday1" value = "">
    <input type = "hidden" id = "tuesday2" name = "tuesday2" value = "">
    <input type = "hidden" id = "wednesday1" name = "wednesday1" value = "">
    <input type = "hidden" id = "wednesday2" name = "wednesday2" value = "">
    <input type = "hidden" id = "thursday1" name = "thursday1" value = "">
    <input type = "hidden" id = "thursday2" name = "thursday2" value = "">
    <input type = "hidden" id = "friday1" name = "friday1" value = "">
    <input type = "hidden" id = "friday2" name = "friday2" value = "">

    <div class = "row" id = "days">
        <div class = "col-lg-1"></div>
        <div class = "col-lg-2" id = "mon">
            MONDAY
            <div id = "finaldates"></div>

            <p id = "mone">05:00a - 8:00a</p>
            <p id = "mtwo">05:30a - 8:30a</p>
            <p id = "mthree">06:00a - 9:00a</p>
            <p id = "mfour">07:00a - 10:00a</p>

            <p id = "mfive">10:00a - 1:00p</p>
            <p id = "msix">10:00a - 2:00p</p>

            <div class = "buffer"></div>
            <img src = "pics/PM-icon.png">

            <p id = "mseven">03:00p - 6:00p</p>
            <p id = "meight">03:30p - 6:30p</p>
            <p id = "mnine">04:00p - 7:00p</p>

            <p id = "choosemon">Choose Your Own</p>
            <p id = "nomon">NO MONDAYS</p>
        </div>