JSFiddle - React, Tailwind, and code Playground

by tyrsius

HTML

<select data-bind="options: addresses, optionsText: 'typeName', value: selectedAddress"></select>
<div data-bind="with: selectedAddress">
    Name: <input data-bind="value: typeName" /></br>
    Line1: <input data-bind="value: address1 " /></br>
    Line2: <input data-bind="value: address2 " /></br>
    City: <input data-bind="value: city " /></br>
    State: <select data-bind="options: $parent.states, value: state"></select></br>
    Postal Code: <input data-bind="value: postalCode " />
</div>
<button data-bind="click: addAddress ">New Address</button>
<button data-bind="click: deleteAddress ">Remove Address</button>

JavaScript

var states = [
    "Alabama", 
    "Alaska", 
    "Arizona", 
    "Arkansas", 
    "California", 
    "Colorado", 
    "Connecticut", 
    "Delaware", 
    "District Of Columbia", 
    "Florida", 
    "Georgia", 
    "Hawaii", 
    "Idaho", 
    "Illinois", 
    "Indiana", 
    "Iowa", 
    "Kansas", 
    "Kentucky", 
    "Louisiana", 
    "Maine", 
    "Maryland", 
    "Massachusetts", 
    "Michigan", 
    "Minnesota", 
    "Mississippi", 
    "Missouri", 
    "Montana",
    "Nebraska",
    "Nevada",
    "New Hampshire",
    "New Jersey",
    "New Mexico",
    "New York",
    "North Carolina",
    "North Dakota",
    "Ohio", 
    "Oklahoma", 
    "Oregon", 
    "Pennsylvania", 
    "Rhode Island", 
    "South Carolina", 
    "South Dakota",
    "Tennessee", 
    "Texas", 
    "Utah", 
    "Vermont", 
    "Virginia", 
    "Washington", 
    "West Virginia", 
    "Wisconsin", 
    "Wyoming"
];

var jsonAddresses = [{
        AddressType: 1,
        TypeName: "Home",
        Address1: "",
        Address2: "",
        City: "",
        State: "",
        PostalCode: ""
    }, {
        AddressType: 2,
        TypeName: "Office",
        Address1: "Piping Rock 1212",
        Address2: "Drive",
        City: "Houston",
        State: "Texas",
        PostalCode: "77077"
    }, {
        AddressType: 3,
        TypeName: "Other",
        Address1: "",
        Address2: "",
        City: "",
        State: "",
        PostalCode: ""
    }, {
        AddressType: 4,
        TypeName: "Vacation",
        Address1: "",
        Address2: "",
        City: "",
        State: "",
        PostalCode: ""
    }];

var Address = function(address) {
    this.id = ko.observable(address.AddressType || 0);
    this.typeName = ko.observable(address.TypeName || '');
    this.address1 = ko.observable(address.Address1 || '');
    this.address2 = ko.observable(address.Address2 || '');
    this.city = ko.observable(address.City || '');
    this.state = ko.observable(address.State ||...