JSFiddle - React, Tailwind, and code Playground

by sm1215

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div class="feedback"></div>
<button class="next">next</button>
<input class="amount" type="input" placeholder="number of seats" />

<div class="seats">
  <div class="seat taken">1</div>
  <div class="seat taken">2</div>
  <div class="seat">3</div>
  <div class="seat">4</div>
  <div class="seat taken">5</div>
  <div class="seat">6</div>
  <div class="seat">7</div>
  <div class="seat taken">8</div>
  <div class="seat taken">9</div>
</div>

CSS

.feedback{
	height:30px;
}
.seats{
	width:150px;
}
.seat{
	float:left;
	height:0px;
	width:50px;
	background-color:blue;
	text-align:center;
	color:white;
	border:1px solid white;
	box-sizing:border-box;
	font-size:12px;
	line-height:16px;
	padding:20px 0 30px 0;
	cursor:pointer;
}

.seat.taken{
	background-color:red;
}

.seat:hover{
	background-color:green;
}

JavaScript

$(document).ready(function(){

})
.on('click', '.next', function(){
	var amount = parseInt($('.amount').val());
	if(amount){
		findSeats(amount);
	} else {
		$('.feedback').html('<p>Please add a number of seats</p>');
	}
})
;

function findSeats(num){
	var seats = $('.seat');
	console.log(seats[3]);
	
	for(var i = 0; i < seats.length; i++){
		if(!seat.hasClass('taken'))
	}
}