JSFiddle - React, Tailwind, and code Playground
HTML
<table align="center" class="table table-bordered" style="border-radius: 15px;">
<col width="350">
<col width="600">
<col width="150">
<tr>
<th>Destination</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Villa Jibacoa
<br>
</td>
<td>
<ul>
<li>255 rooms</li>
<li>One 9-storey building</li>
<li>4 restaurants</li>
<li>5 bars</li>
<li>Pool</li>
<li>110 and 220 volts (adaptor required)</li>
</ul>
</td>
<td>$784
<div style="position: relative; margin-top: 40px;">
<button id="first" type="button" onclick="SeatAssignment(1)" class="btn btn-success">Book Now!</button>
</div>
</td>
</tr>
<tr>
<td>Gran Caribe Puntarena
<br>
</td>
<td>
<ul>
<li>110 rooms</li>
<li>Bungalow-style villas</li>
<li>2 restaurants</li>
<li>2 bars</li>
<li>Pools</li>
<li>220 volts (adaptor required)</li>
</ul>
</td>
<td>$947
<div style="position: relative; margin-top: 40px;">
<button type="button" onclick="SeatAssignment(2)" class="btn btn-success">Book Now!</button>
</div>
...
JavaScript
var SeatSection;
var seats = (11);
var firstClass = 1;
var economy = 6;
var seatselection;
seats = 0;
SeatAssignment = function(flight) {
console.log(flight);
seatselection = window.prompt("Please select 1 for firstclass and 2 for economy");
if (seatselection == 1 && firstClass <= 5 && seats == 0) {
window.alert("You have been assigned first class seat #" + firstClass);
seats[firstClass] = 1;
++firstClass;
}
}