JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<h2>ListCollection</h2>


<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Meal</th>
            <th>Price</th>
        </tr>
    </thead>
    <!-- foreach 'seats' in the ReservationsViewModel, 'seats' in the foreach is an array inside the view-model -->
    <tbody data-bind="foreach: seats">
        <tr>
            <!--name: is not a function because it's not an observable property-->
            <!--options: comes from the avaialableMeals property of the ReservationViewModel-->
            <!--value: comes from the seatReservation class, equivalent to (SeatReservation.meal), it represents the selected value not the <option value="id">    
            -->
            <!--optionsText: comes from availableSeats.mealName of the ReservationViewModel-->
            <td>
                <input data-bind="value: name" />
            </td>
            <td>
                <select data-bind="
                    options: $root.availableMeals,
                    value: mealId,
                    optionsValue: 'mealId',
                    optionsText: 'mealName',
                    optionsCaption: 'Choose...', event:{ change: meal().enableButton() }"></select>
            </td>
            <td data-bind="text: meal().formattedPrice()"></td>
            <td><a href="#" data-bind="click: $root.removeSeat">Remove</a>
                <td><input type="button" value="go" /></td>

            </td>
        </tr>
    </tbody>
</table>
<button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>

JavaScript

(function () {
    function Meal(id, name, price) {
        var $this = this;
        $this.mealId = id;
        $this.mealName = name;
        $this.price = price;
        $this.formattedPrice = function () {
            return $this.price ? "$" + $this.price.toFixed(2) : "None";
        };
           $this.enableButton = function () {
               alert("valu"+$this.mealName);
               if($this.mealName == "Standard"){
                 alert("if");
                   return false; }
               else{
                   alert('else");
                   return true;
               }
        };
    }

    // Class to represent a row in the seat reservations grid
    function SeatReservation(reservations, name, initialMealId) {
        var $this = this;
        $this.name = ko.observable(name);
        $this.mealId = ko.observable(initialMealId);
        $this.meal = ko.computed(function () {
            return _.find(reservations.availableMeals, function (m) {
                return m.mealId === $this.mealId();
            });
        });
    }

    function ReservationsViewModel(name, meal) {
        var $this = this;
        // Non-editable catalog data - would come from the server
        this.availableMeals = [
        new Meal(1, "Standard", 47.55),
        new Meal(2, "Premium", 34.95),
        new Meal(3, "Ultimate", 290.123),
        new Meal(1, "Choose...", 4.55),];

        //editable data
        this.seats = ko.observableArray([
        new SeatReservation($this, "Randel", 3),
        new SeatReservation($this, "Knockout", 2)]);

        //operations
        this.addSeat = function () {
            this.seats.push(new SeatReservation($this, "", 1));
        };

        this.removeSeat = function (seat) {
            this.seats.remove(seat);
        };
    }

    ko.applyBindings(new ReservationsViewModel());
}());