JSFiddle - React, Tailwind, and code Playground

by anish

HTML

<h2>Your seat reservations</h2>

<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
    </tr></thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="foreach:seats">
        <td data-bind="text:name"></td>
        <td data-bind="text:meal().mealName"></td>
        <td data-bind="text:meal().price"></td>
    </tbody>
</table>

CSS

tr,th{
    border:1px solid #000;
}

JavaScript

function seatReservation(name,initialMeal){
 var self = this;
 self.name = name;
 self.meal = ko.observable(initialMeal);
}

function ReservationViewModel(){
 var self = this;
    self.availableMeals = 
        [{ mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }];
    
    self.seats = ko.observable([
    new seatReservation("Steve",self.availableMeals[0]);
    new seatReservation("Anish",self.availableMeals[1]);    
    ]);
}

ko.applyBinding(ReservationViewModel())