使用下面的代码，我想建立一个使用input type="number"添加的项目的总成本。

<div data-bind="foreach: availableItems()">
<br />
  <input type="number" data-bind="event: {change: $parent.itemCountChange}" min="0" step="1" value="0" />
  <label data-bind="text: name"/>
</div>
<label id="totalCost" data-bind="text: totalCost" />

JS：

var refreshmentsModel = function ref() {
  var self = this;
  self.totalCost = ko.observable(0);
  self.addedItems = ko.observableArray();
  self.availableItems = ko.observableArray([{name: "Tea", price: 3.00}, {name: "Coffee", price: 4.00}, {name: "Cake", price: 5.00}]);
  self.itemCountChange = function(d) {
    self.addedItems.push(d);
    alert("Added items now: " + self.addedItems().length)
  }
};
ko.applyBindings(new refreshmentsModel());

但是我不能知道是增加还是减少，所以我的addedItems总是会得到一个新的条目，即使计数减少了。我试着向number输入的值添加一个绑定，但是这样会绑定到foreach中的每个输入，所以改变一个就会改变所有的输入。
也许它会更容易重新设计，并有两个按钮，一个为添加和一个为删除，但如果任何人有任何想法，对上述将是伟大的！
谢谢
PS.对不起，我试图用代码创建一个codepen，但它一直给我错误'ko is not defined'，即使我在设置窗口中添加了knockout引用。