JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Moment</th>
      <th>Antal </th>
      <th>Kostnad</th>
      <th>Totalt</th>
      <th></th>
    </tr>
  </thead>
  <tbody data-bind="foreach: materials">
    <tr>
      <td>
        <input data-bind="value: name" />
      </td>
      <td>
        <input data-bind="value: quantity" />
      </td>
      <td>
        <input data-bind="value: rate" />
      </td>
      <td data-bind="text: formattedTotal"></td>
      <td>
        <a href="#" data-bind="click: $root.removeMaterial" class="fa fa-trash"></a>
      </td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan="2"> 
      </th>
      <th class="text-right">Totalt</th>
      <th class="text-center"><span data-bind="text: totalSurcharge().toFixed(0)"></span></th>
      <th>&nbsp;</th>
    </tr>
    <tr id="momsRow" class="hidden">
      <th colspan="3" class="text-right">Moms</th>
      <th class="text-center"><span data-bind="text: totalVat().toFixed(1)"></span></th>
      <th>&nbsp;</th>
    </tr>
    <tr id="byggmomsRow" class="hidden">
      <th colspan="3" class="">Omvänd byggmoms</th>
      <th class="text-center"></th>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <th colspan="3" class="text-right">Totalt:</th>
      <th class="text-center"><span data-bind="text: totalPlusVat().toFixed(2)"></span></th>
      <th>&nbsp;</th>
    </tr>
  </tfoot>
</table>

JavaScript

/*------------- Sum table ------------- */
function addMaterial(name, quantity, rate) {
  this.name = ko.observable(name);
  this.quantity = ko.observable(quantity);
  this.rate = ko.observable(rate);
  this.formattedTotal = ko.computed(function() {
    return this.rate() * this.quantity();
  }, this);
}

function documentViewModel() {
  var self = this;

  //create a materials array 
  self.materials = ko.observableArray([
    new addMaterial("", 0, 0)
  ]);

  // Computed data
  self.totalSurcharge = ko.computed(function() {
    var total = 0;
    alert(self.materials().length);
    console.log(self.materials());

    for (var i = 0; i < self.materials().length; i++)
      total += self.materials()[i].formattedTotal();
    return total;


  });
  // add VAT(moms 25%) data
  self.totalVat = ko.computed(function() {
    var totalWithVat = 0;
    for (var i = 0; i < self.materials().length; i++)
      totalWithVat += self.materials()[i].formattedTotal();
    totalWithVat = totalWithVat * 0.25;
    return totalWithVat;
  });

  // Totalt with VAT(moms 25%) data
  self.totalPlusVat = ko.computed(function() {
    var totalWithVat = 0;
    for (var i = 0; i < self.materials().length; i++)
      totalWithVat += self.materials()[i].formattedTotal();
    totalWithVat = totalWithVat * 1.25;
    return totalWithVat;
  });


  // Operations
  self.addMaterial = function() {
    self.materials.push(new addMaterial("", 0 ,0 ));
  }
  self.removeMaterial = function(material) {
    self.materials.remove(material)
  }
}

var vm = new documentViewModel();

var a = [{
  name: "moment 1",
  quantity: 1,
  rate: 10,
  formattedTotal: "10"
}, {
  name: "Moment 2",
  quantity: 2,
  rate: 20,
  formattedTotal: "40"
}];

for (var i = 0; i < a.length; i++) {
  var item =new addMaterial(a[i].name, a[i].quantity, a[i].rate);
  console.log(item);
  vm.materials.push(item);
}

/*
$.getJSON("/json/tender_offer_edit_moment_json.asp", function(data) {
...