JSFiddle - React, Tailwind, and code Playground

by aman1981

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>
<table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Input</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</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: 'FirstName',optionsCaption: '--Select--'"></select></td>
                <td data-bind="text: meal().FirstName"></td>
                <td data-bind="text: meal().LastName"></td>
                <td data-bind="text: meal().Address"></td> 
                <td>
                    <input type="button" value="Remove Row" data-bind="click: $root.removeRow"   />
                </td>
<td>
</tr>
        </tbody>
    </table>

    <button data-bind="click: addSeat">Addnewrow</button>

JavaScript

// Class to represent a row in the seat reservations grid
        function SeatReservation(name, initialMeal) {
            var self = this;
            self.name = name;
            self.meal = ko.observable(initialMeal);
        }

        // Overall viewmodel for this screen, along with initial state
        function ReservationsViewModel() {
            var self = this;
            var c = '[{"FirstName":"Alex","LastName":"Sanders","Address":123},{"FirstName":"Sam","LastName":"Billings","Address":"Mahony Street"}]';
             var jsonResult = JSON.parse(c);
            // Non-editable catalog data - would come from the server
            self.availableMeals = [
            ];

            for (key in jsonResult) {
                var item = {
                    FirstName: jsonResult[key].FirstName,
                    LastName: jsonResult[key].LastName,
                    Address:jsonResult[key].Address
                };
                self.availableMeals.push(item);
            }


            // Editable data
            self.seats = ko.observableArray([
                new SeatReservation("1", self.availableMeals[0]),
                new SeatReservation("2", self.availableMeals[0])
            ]);

            // Operations
            self.removeRow = function (data) {
                self.seats.remove(data);
            }

            self.addSeat = function () {
                self.seats.push(new SeatReservation("", self.availableMeals[0]));
            }
        }

        ko.applyBindings(new ReservationsViewModel());