JSFiddle - React, Tailwind, and code Playground

by sagens

HTML

<div data-bind="foreach: items">
    <div data-bind="text: itemType"></div><div data-bind="text: description"></div>
</div>
<input type="text" data-bind="value: newItem.itemType" />
<input type="text" data-bind="value: newItem.description" />
<input type="">

JavaScript

var data = [
        {
            itemType: 'sku',
            itemId: '123-12345',
            description: 'Sample SKU with #123-123-23452',
            quantity: 1,
            price: 123.00,
            extendedPrice: 123.00,
            deliveryMethod: 'delivery'
        },
        {
            itemType: 'sku',
            itemId: '123-12345',
            description: 'Sample SKU with #123-123-23452',
            quantity: 1,
            price: 4645.00,
            extendedPrice: 6456.00,
            deliveryMethod: 'hold'
        },
        {
            itemType: 'sku',
            itemId: '123-12345',
            description: 'Sample SKU with #123-123-23452',
            quantity: 1,
            price: 42395.00,
            extendedPrice: 234621.00,
            deliveryMethod: 'take'
        }]

    var orderItem = function(item)
    {
        var self = this;

        self.itemType = ko.observable(item.itemType);
        self.itemId = ko.observable(item.itemId);
        self.description = ko.observable(item.description);
        self.quantity = ko.observable(item.quantity);
        self.price = ko.observable(item.price);
        self.extendedPrice = ko.observable(item.extendedPrice);
        self.deliveryMethod = ko.observable(item.deliveryMethod);
    }

    var orderItems = function(items)
    {
        var self = this;
        self.items = ko.observableArray(ko.utils.arrayMap(items, function(item){
            return new orderItem(item);
        }));

        self.newItem = new orderItem({
            itemType: 'item',
            price: 1,
            extendedPrice: 2,
            quantity: 1,
            description: 'test item',
            deliveryMethod: 'hold'
        });

        self.itemTypes = [
            { value: 'sku', name: 'SKU' },
            { value: 'item', name: 'Item' },
            { value: 'service', name: 'Service' },
            { value: 'fee', name: 'Fee' }
        ];

        self.deliveryMethods = [
            { value:...