JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="foreach: designs">
    <div>
        <span data-bind="text: DesignName"></span>
        <a href="#" data-bind="click: addDesignDelivery">Add</a>
    </div>
    <div>
        MaxQuantity:<span data-bind="text: MaxQuantity"></span>
    </div>
    <div>
        Remaining:<span data-bind="text: Remaining"Remaining></span>
    </div>

    <div data-bind="foreach: DesignDeliveries">
        <div>
            <input data-bind="value: Quantity" />
        </div>
        <div>  
            <a href="#" data-bind="click: $parent.removeDesignDelivery">
                Delete
            </a>             
        </div>    
        <br/>
         <br/>
    </div>    
</div>

JavaScript

var DesignDeliveryModel = function(quantity, depotId) {
    var self = this;

    self.Quantity = ko.observable(quantity);
    self.DepotId = depotId;
};

var DesignModel = function(bookingDesignId, designName, maxQuantity, deliveries) {
    var self = this;

    self.BookingDesignId = bookingDesignId;
    self.DesignName = designName;
    self.MaxQuantity = maxQuantity;
    self.DesignDeliveries = ko.observableArray(deliveries);

    self.Remaining = ko.computed(function() {
        var result = self.MaxQuantity;
        ko.utils.arrayForEach(self.DesignDeliveries(), function(item) {
            result = result - item.Quantity();
        });
        return result;
    });

    self.addDesignDelivery = function() {
        self.DesignDeliveries.push(new DesignDeliveryModel(0, ""));
    };

    self.removeDesignDelivery = function(designDelivery) {
        self.DesignDeliveries.remove(designDelivery);
    };
};

var DesignsModel = function(designs) {
    var self = this;

    self.designs = ko.observableArray(ko.utils.arrayMap(designs, function(design) {
        return new DesignModel(design.BookingDesignId, design.DesignName, design.Quantity, design.DesignDeliveries);

    }));

    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.designs), null, 2));
    };

    self.lastSavedJson = ko.observable("");

};
var initialData = [{
    "DesignId": "1",
    "DesignName": "Design1",
    "Quantity": 50,
    "DesignDeliveries": []},
{
    "DesignId": "2",
    "DesignName": "Design2",
    "Quantity": 50,
    "DesignDeliveries": []},
{
    "DesignId": "3",
    "DesignName": "Design3",
    "Quantity": 500,
    "DesignDeliveries": []}];
ko.applyBindings(new DesignsModel(initialData));