JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<table>
<thead>
  <tr><th>Paggenger Name</th><th>Meal</th><th>Surcharge</th></tr>
</thead>
<tbody data-bind="foreach: seats">
  <tr>
    <td><input data-bind="value: name" /></td>
    <td> 
      <select data-bind="foreach: $root.availableMeals">
        <option><!-- ko text:mealName--><!--/ko--></option>
      </select>
    </td>
    <td data-bind="text: formattedPrice"></td>
  </tr>  
</tbody>
</table>
<span data-bind="text: totalSurcharge().toFixed(2)"></span>

JavaScript

$(function() { 
debugger;
  function seatReservation(name, initalMeal) {
  	var self = this;
    self.name = name;
    self.meal = ko.observable(initalMeal);
    self.formattedPrice = ko.computed(function () {
    		var price = self.meal().price;
    		return price ? '$' + price : 'Free';
    }, this);
  }
  
  function reservationViewModel () {
  	var self = this;
    self.availableMeals = [
    	{mealName: 'Standard (Sandwich)', price: 0},
      {mealName: 'Premium (Cheeseburger)', price: 34.96},
      {mealName: 'Ultimate (70lbs prime steak)', price: 190}
    ];
    
    self.seats = ko.observableArray([
    	new seatReservation('Steve', self.availableMeals[0]),
      new seatReservation('Bert', self.availableMeals[1])    
    ]);
    
    self.totalSurcharge = ko.computed(function () {
    	var total = 0;
      for (var i = 0; i < self.seats().length; i++) {
      	total += self.seats()[i].meal().price;
      }
      return total;
    });
  }
  
  ko.applyBindings(new reservationViewModel());
});