JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="plan">
<table>
	<tr>
		<td id="seat1" class="n"></td>
		<td id="seat2" class="n taken"></td>
		<td id="seat3" class="n"></td>
		<td id="seat4" class="n"></td>
		<td id="seat5" class="n"></td>
	</tr>
	<tr>
		<td id="seat6" class="n"></td>
		<td id="seat7" class="n"></td>
		<td id="seat8" class="n taken"></td>
		<td id="seat9" class="n"></td>
		<td id="seat10" class="n"></td>
	</tr>
</table>
</div>
<div id="seatLocation"></div>

CSS

table{
border-spacing: 10px;
}
.n{background:#09C; width:40px; height:30px;}
.taken{background:#CCC}
.booked{background:#0CF}
#seatLocation{
    background-color: #F6511D;
		color: #fff;
		borderRadius: 2px;
		margin: 0 10px 0 0
}
#seatLocation>i{
  margin:0.5em;
  color:#CCC;
}

JavaScript

// Create an empty array to store the seat ids for click event
var tempArray = [];
var icon='<i class="fa fa-user"></i>';
//Handle the click event
function updateLocation() {
	$('#seatLocation').empty();
  $.each(tempArray,function(i){
    $('#seatLocation').append(icon, tempArray[i], ' -');
  })
}
$('#plan').on('click', 'td.n', function() {
    var maxSeats = 4; //grabbed from JSON
    var seat=$(this);
    var seatLocation = seat.attr('id');
    if (seat.hasClass('booked')){ // Check if the user changed his mind
            seat.removeClass('booked')
            tempArray.splice(tempArray.indexOf(seatLocation), 1);
            updateLocation();
    } else if ($('.booked').length < maxSeats) { // Use .length to check how many '.booked' DOM elements present
        if (seat.hasClass('taken')){
            alert('This Seat Is already booked!');
        } else {
            seat.addClass('booked')
            tempArray.push(seatLocation);
            updateLocation();
        }
    }
    
});