JSFiddle - React, Tailwind, and code Playground

by Michaël Vanbrabandt

HTML

<input type="button" class="seat" value="a1">
<input type="button" class="seat" value="b2">
<input type="button" class="seat" value="c3">
<input type="button" class="seat reserved" value="d4">
<input type="button" class="seat" value="e5">
<input type="button" class="seat" value="f6">
<input type="button" class="seat reserved" value="g7">

CSS

.selected {
    color: red;
}

.reserved {
    color: green;
}

JavaScript

var $first;
var $last;
var loop = false;

$('input.seat').click(function() {

    if($first !== undefined  && $last !== undefined) {
        $first = undefined;
        $last = undefined;
        $('.seat').removeClass('selected');
        loop = false;
    }
    
    if($first === undefined) {
        $first = $(this);
        $first.addClass('selected');
    } else {
        if($last === undefined) {
            $last = $(this);
            loop = true;
        }
    }
    
    if(loop) {
        $('.seat').removeClass('selected');
        if(!$(this).hasClass('reserved'))
            $first.nextUntil($last,':not(.reserved)').andSelf().add($last).addClass('selected');
    }
});