JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<select data-bind="foreach: availableLand, value: selectedLandToAdd">
    <option data-bind="text: $data.Land.Description, value: $data"></option>
</select>
<button data-bind="with: selectedLandToAdd, click: $root.add">Add</button>
<select data-bind="foreach: selectedLands, value: selectedLandToEdit">
    <option data-bind="text: $data.Land.Description, value: $data"></option>
</select>
<button data-bind="with: selectedLandToEdit, click: $root.edit">Edit</button>

JavaScript

var data = [{
    "Land": {
        "Description": "Fairfax land 1",
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
    },
        "Zoning": {
        "Description": "VA Zoning",
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
    },
        "Insurence": {
        "CompanyName": "Geico",
            "Address": null,
            "Phone": null,
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
    },
        "LandID": 1,
        "ZoningID": 1,
        "InsuranceID": 1,
        "MapNum": "M-452658",
        "TaxDistrict": 8754,
        "LandArea": 526.36,
        "Utilities": "Temp",
        "IsRoadPaved": true,
        "SiteCondition": "GOOD",
        "LandAssesmentValue": 5.32,
        "BuildingAssesmentValue": 4.56,
        "BuildingUsage": "Yes",
        "Style": "NT",
        "ExteriorWallMaterial": "TY",
        "Roof": "KI",
        "Basement": "GBH",
        "BasementSize": 452.3,
        "YearBuilt": "\/Date(1138766400000)\/",
        "YearAddition": "\/Date(1329278400000)\/",
        "YearRemodeled": "\/Date(1359864000000)\/",
        "BedRoom": 4,
        "FullBath": 3,
        "HalfBath": 2,
        "FirePlace": 3,
        "BasementRoom": 5,
        "Heating": "GRF",
        "ConstructionQuality": "BETTER",
        "PhysicalCondition": "GOOD",
        "HasSwimmingPool": true,
        "SwimmingPoolSize": 25.1,
        "WoodDeck": 23.5,
        "Porch": 21,
        "Garagae": 2,
        "PurchasePrice": 847.32,
        "PurchaseDate": "\/Date(1202788800000)\/",
        "SalePrice": 5871.2,
        "SaleDate": "\/Date(1327204800000)\/",
        "IsManagementAssociation": true,
        "ManagementName": "GTR",
        "ManagementAddress": "King Street",
       ...