JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<table cellpadding="3" cellspacing="4">
    <thead>
    <tr>
        <th>Name</th>
        <th>Meal</th>
        <th>Price</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: seats">
        <tr>
            <td>
                <input data-bind="value: Name" /> 
            </td>
            <td>
                <select data-bind="options: $root.availablemeals, value: Meal, optionsText: 'MealName'"></select>
            </td>
            <td data-bind="text: FormatPrice"></td>
        </tr>
    </tbody>
</table>
<button data-bind="click:ReserveNewSeat">Reserve New One</button>

JavaScript

function setreservation(name, initmeal) {
    var self = this;
    self.Name = name;
    self.Meal = ko.observable(initmeal);

    self.FormatPrice = ko.computed(function() {
        return self.Meal().Price ? "$" + self.Meal().Price.toFixed(2) : "none";
    });
}

function ReservationViewModel() {
    var self = this;
    self.availablemeals = [{
        "MealName": "standard",
        "Price": 10},
    {
        "MealName": "premium",
        "Price": 20},
    {
        "MealName": "Platinum",
        "Price": 30}];
    
    self.seats = ko.observableArray(
        [new setreservation("karthik", self.availablemeals[0]), 
         new setreservation("Tirumalesh", self.availablemeals[1])]);
    
    self.ReserveNewSeat = function() {
        self.seats.push(new setreservation("karhik", self.availablemeals[2]));
    };
}

ko.applyBindings(new ReservationViewModel());