Booking Lot using checkbox

Hi guys, I need some help with my javascript code. I'm creating a booking lot system using Laravel. My design looks like this https://github.com/fiqahalim/booking_lot/blob/main/booking-lot.png

I need help on how to disable those checkboxes when it is selected, and when a new customer tries to click the same lot, it should display a red color = "occupied".

I have success storing the value into the database, I only have a problem with Javascript (totally new in programming).

Below is my code for blade view:

<table id="seatsBlock" class="row-seat">
      <tr>
        <td>Level 8</td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-08"></td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-18"></td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-28"></td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-38"></td>
        <td class="seatGap"></td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-68"></td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-88"></td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-98"></td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-108"></td>
        <td><input type="checkbox" class="seat" name="seats[]" value="DA-09-118"></td>
      </tr>
    </tr>
</table>

This is my javascript function:

let selectedSeats = [];
let selectedSeatsIndexs = [];
let allSeats = document.querySelectorAll('#container-seats .seat');

////////INITIALIZE DATA///////////
readState();
updateState();

let containerSeats = document.querySelector('#container-seats');
containerSeats.addEventListener("click", (e) => {
    let element = e.target;
    if (element.classList.contains('seat') && !element.classList.contains('occupied')) {
        if (element.classList.contains('selected')) {
            selectedSeatsNumber--;
            element.classList.remove('selected');
        } else {
            selectedSeatsNumber++;
            element.classList.add('selected');
        }
    }
    updateState();
})

function updateState() {
    console.log("allSeats", allSeats);
    selectedSeats = document.querySelectorAll('.row-seat .seat.selected');
    selectedSeatsIndexs = [...selectedSeats].map((x) => [...allSeats].indexOf(x));
    document.querySelector('#count').innerText = selectedSeatsNumber;
    localStorage.setItem('selectedSeatsNumber', selectedSeatsNumber)
    localStorage.setItem('selectedSeatsIndexs', JSON.stringify(selectedSeatsIndexs));
}

function readState() {
    selectedSeatsNumber = +localStorage.getItem('selectedSeatsNumber') || 0;
    selectedSeatsIndexs = JSON.parse(localStorage.getItem('selectedSeatsIndexs')) || [];
    [...allSeats].map((seat, index) => {
        if (selectedSeatsIndexs.includes(index)) {
            seat.classList.add('selected');
        }
    })
}

On my controller, I save those value, so that the customer know which lots he/she has booked.

$booking = null;
$booking = new ProductBooking;
$booking->seats = $request->seats;
$booking->product_id = $products->id;
$booking->book_locations_id = $locations->id;
$booking->save();