JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<div class="slot-list">
  <p class="slot_text"><i>* Time slots are in IST</i></p>
  <div class="time_scroll">
    <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="09" data-clicked=-1>
                                                <span class="time-button-title">09.00am</span>
                                            </button>
    </div>
    <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="10">
                                                <span class="time-button-title">10.00am</span>
                                            </button>
    </div>
    <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="11">
                                                <span class="time-button-title">11.00am</span>
                                            </button>
    </div>
    <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="12">
                                                <span class="time-button-title">12.00pm</span>
                                            </button>
    </div>
    <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="13">
                                                <span class="time-button-title">01.00pm</span>
                                            </button>
    </div>
    <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="14">
                                                <span class="time-button-title">02.00pm</span>
                                            </button>
    </div>
    <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="15">
                                                <span class="time-button-title">03.00pm</span>
                                            </button>
   ...

JavaScript

$(document).ready(function(){
	$(':button').click(function(){
  	var buttonVal = $(this).val();
    $(this).data('clicked', "1");
    alert(buttonVal);
  });
});