JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div class="results">
    Total (type = 1): <span data-bind="text: $root.totalPerType(1)"></span>
    <table>
        <tr>
            <th>Type</th>
            <th>Quantity</th>
        </tr>  
        <tbody data-bind="foreach: Results">
            <tr>
                <td><input type="text" data-bind="value: Type" /></td>
                <td><input type="text" data-bind="value: Quantity" /></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

div.results {
    font-family: Helvetica;
}

div.results th, td {
    padding: .3em;
}

JavaScript

var results = [
    { Type: 1, Quantity: 3},
    { Type: 1, Quantity: 1},
    { Type: 2, Quantity: 5},
    { Type: 1, Quantity: 9},
    { Type: 3, Quantity: 1},
    { Type: 1, Quantity: 5},
    { Type: 1, Quantity: 6},
    { Type: 2, Quantity: 7},
    { Type: 2, Quantity: 2},
    { Type: 1, Quantity: 4},
    { Type: 3, Quantity: 6},
    { Type: 3, Quantity: 2},
    { Type: 2, Quantity: 9},
    { Type: 1, Quantity: 1},
    { Type: 1, Quantity: 2},
    { Type: 3, Quantity: 3},
    { Type: 1, Quantity: 6},
    { Type: 3, Quantity: 3},
    { Type: 3, Quantity: 7},
    { Type: 2, Quantity: 8},
    { Type: 1, Quantity: 4},
    { Type: 2, Quantity: 5}
];

var ViewModel = function(data) {
    var self = this;

    this.Results = ko.observableArray(data);

    this.totalPerType = function(type) {
        var total = 0;
        for (var index in self.Results()) {
            if (self.Results()[index].Type == type) total += self.Results()[index].Quantity;
        }

        return total;
    };
};

ko.applyBindings(new ViewModel(results));