JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<table>
    <tbody data-bind="foreach:seats">
        <tr>
            <td>
<span data-bind="text:No"></span>

                <input type="text" data-bind="value:No" />
            </td>
            <td>
                <input type="checkbox" data-bind="checked:Booked" />
            </td>
        </tr>
    </tbody>
</table>
<button type="button" data-bind="click: bookSecondSeat">Book second seat</button>

JavaScript

// "Class" that represents a single seat
var Seat = function (no, booked) {
    var self = this;
    self.No = ko.observable(no);
    self.Booked = ko.observable( !! booked);

    // Subscribe to the "Booked" property
    self.Booked.subscribe(function () {
        alert(self.No());
    });
};

var viewModel = {
    seats: ko.observableArray([
    new Seat(1, false), new Seat(2, false), new Seat(3, true),
    new Seat(4, false), new Seat(5, true), new Seat(6, true),
    new Seat(7, false), new Seat(8, true), new Seat(9, true)]),

    bookSecondSeat: function () {
        var targetId = 2;

        var seat = ko.utils.arrayFirst(this.seats(), function (item) {
            return item.No() == targetId;
        });

        if (seat) {
            seat.Booked(true);
        }
    }
};

ko.applyBindings(viewModel);