JSFiddle - React, Tailwind, and code Playground

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);