JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>%</th>
        </tr>
    </thead>
    <tbody data-bind='foreach: items'>
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: value"></td>
            <td data-bind="text: $parent.percentOfTotal($data)"></td>
        </tr>
    </tbody>
</table>

<button data-bind='click: addRandomItem'>Add a random item</button>

JavaScript

// Bill
var ViewModel = function() {
    var self = this;
    self.items = ko.observableArray();
    
    self.addItem = function(name, val) {
        self.items.push({"name": name, "value": val});
    };
    
    self.addRandomItem = function() {
        var name = "Item" + (self.items().length + 1);
        var value = Math.round(Math.random() * 10);
        self.addItem(name, value);
    };
    
    self.total = ko.computed(function() {
        var sum = 0;
        var items = self.items();
        for (var i = 0; i < items.length; ++i) {
            sum += items[i].value;
        }
        return sum;
    });
    
    self.percentOfTotal = function(item) {
      return item.value / self.total();
    };
};

var vm = new ViewModel();

vm.addItem("Item1", 5);
vm.addItem("Item2", 2);
vm.addItem("Item3", 3);


ko.applyBindings(vm);