JSFiddle - React, Tailwind, and code Playground

by amhedh

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
<h3>Person 1</h3>
Name: <input type="text" data-bind="value: People()[0].Name" /><br/>
Last Name: <input type="text" data-bind="value: People()[0].LastName"/><br/>
Driver Id <input type="text" data-bind="value: People()[0].DriverId"/><br/>

<h3>Person 2</h3>
Name: <input type="text" data-bind="value: People()[1].Name" /><br/>
Last Name: <input type="text" data-bind="value: People()[1].LastName"/><br/>
Driver Id <input type="text" data-bind="value: People()[1].DriverId"/><br/>

JavaScript

var viewModel;

var Person = function(){
    var self = this;
    self.Name = ko.observable();
    self.LastName = ko.observable();
    self.DriverId = ko.observable();
}

var MainViewModel = function(){
    var self = this;
    self.People = ko.observableArray();
}

$(function(){
    viewModel = new MainViewModel();
    
    var person1 = new Person();
    person1.Name = 'John';
    person1.LastName = 'Deer';
    person1.DriverId = '001012345191';
    viewModel.People.push(person1);

    var person2 = new Person();
    person2.Name = 'Jane';
    person2.LastName = 'Doe';
    person2.DriverId = '001012345191';
    viewModel.People.push(person2);

    ko.applyBindings(viewModel)
});