How to display different checkbox name based on current time?

I'm building an app to remind people to take medication, the app will display the medication(s) the user should take based on the current time, e.g if the user need to take medication 1 and 2 at 10am, then when the time is 10am-10:59am, the checkboxes will display "medication 1" and "medication 2" for the user to tick off. But if the user need to take medication 3 and 4 at 9pm, then at 9pm-9:59pm, the checkboxes will display "medication 3" and "medication 4".

The html I currently have:

               <div id=aa style="display:none">
        <form>
            <input type="checkbox" name="Medication 1" value="one">Supplement One<br>
            <input type="checkbox" name="Medication 2" value="two">Supplement Two<br>
            <input id=xbutton type="button" onClick="validate()" value="Submit">
        </form>

    </div>

Right now as you can see the app will display just Medication 1 and Medication 2 no matter what time the user open the app. Is there a way to make the checkboxes display different words based on the current time?