<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Booking Slots:</h2> <table class="table-bordered"> <tbody class="reservationTable"></tbody> </table> </div> </div>

td{ height: 30px; min-width: 120px; margin: 5px; border-radius: 2px; } .booked{ background-color: red; } .selected{ background-color: white; } .vacant{ background-color: green; }

var numArray = []; $(document).ready(function(){ createReservationTable(5,5); }); $(document).on('click', '.vacant', function() { if ($(this).hasClass("vacant")) { idValue = $(this).attr('id'); $(this).removeClass("vacant"); $(this).addClass("selected"); numArray.push(idValue); } }); $(document).on('click', '.selected', function() { idValue = $(this).attr('id'); remove(numArray,idValue); $(this).removeClass("selected"); $(this).addClass("vacant"); }); function createReservationTable(rows, cols){ for (var i = 1; i <= rows; i++) { $('.reservationTable').append('<tr id="'+i+'" class="tr-'+i+'">'); for (var j = 1; j <= cols; j++) { $('.tr-'+i+'').append('<td id="'+i+'.'+j+'" class="vacant"></td>'); } $('.reservationTable').append('</tr>'); } } function remove(array, element) { const index = array.indexOf(element); array.splice(index, 1); }