Q:

How to sum values of two text fields and display the result in a third textfiled?

I got this table where I want to Sum the values of two textfields:

function myAdd() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(0);
 var cell3 = row.insertCell(0);
 var cell4 = row.insertCell(0);
 var cell5 = row.insertCell(0);
    cell1.innerHTML = "<input name='totalOf' type='text' class='fields' id='totalOf'>";
    cell2.innerHTML = "<input name='price' type='text' class='fields' id='price'>";
 cell3.innerHTML = "<input name='acceptedKgMeters' type='text' class='fields' id='acceptedKgMeters'>";
 cell4.innerHTML = "<input name='nameofArticle' type='text' class='fields fieldstwo' id='nameofArticle'>";
 cell5.innerHTML = "";
}
function myDelete() {
    document.getElementById("myTable").deleteRow(1);
}
<!--This is the table*-->
<form id="fromTable" name="formTable">
  <table width="100%" border="1" id="myTable">
    <tr id="myTable">
      <th width="7%" id="cell1" scope="col">Row.Num.</th>
      <th width="33%" id="cell2" scope="col">Column1</th>
      <th width="31%" id="cell3" scope="col">Column2</th>
      <th width="7%" id="cell4" scope="col">Column3</th>
      <th width="22%" id="cell5" scope="col">Total</th>
    </tr>
    </table>
  </form>
<!--These are the buttons. The ones that I add and delete rows.-->
  <p>
    <input name="addRow" type="submit" class="addRowbtn" onClick="myAdd();" value="Add row" />
    <input name="deleteRow" type="submit" class="addRowbtn" onClick="myDelete();" value="Delete Row" />
  </p>



When you run the snippet and click the "Add row Button" a new row is added. In that second row textfields excist. So when i enter for example 3 in the textfield below Column 2 and 5 in the textfield below Column 3, I want it to show the result in the textfield below column Total.
Thanks for the help! :)

A:

Here it is, it should work, it works for me 
<!doctype html>
<html>

<style>
table, td {
    border: 1px solid black;
}
</style>

<!--This is the table*-->

  <table width="100%" border="1" id="myTable">
    <tr id="myTable">
      <th width="7%" id="cell1" scope="col">Row.Num.</th>
      <th width="33%" id="cell2" scope="col">Column1</th>
      <th width="31%" id="cell3" scope="col">Column2</th>
      <th width="7%" id="cell4" scope="col">Column3</th>
      <th width="22%" id="cell5" scope="col">Total</th>
    </tr>
    </table>

<!--These are the buttons. The ones that I add and delete rows.-->
  <p>
    <input name="addRow" type="submit" class="addRowbtn" onClick="myAdd();" value="Add row" />
    <input name="deleteRow" type="submit" class="addRowbtn" onClick="myDelete();" value="Delete Row" />
  </p>

  <script>
  function myAdd() {
    var table = document.getElementById("myTable");
    var cellt1 = cell1;
    var cellt2 = cell2;
    var cellt3 = cell3;
    var cellt4 = cell4;
    var cellt5 = cell5;
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = "<input name='totalOf' type='text' class='fields' id='totalOf'>"
    cell2.innerHTML = "<input name='price' type='text' class='fields' ' id='price'>";
    cell3.innerHTML = "<input name='acceptedKgMeters' type='text' class='fields' onkeyup='sum()' id='acceptedKgMeters'>";
    cell4.innerHTML = "<input name='nameofArticle' type='text' class='fields fieldstwo' id='nameofArticle'>";
    cell5.innerHTML = "<input readonly='readonly' id=total>"
}
function myDelete() {
    document.getElementById("myTable").deleteRow(1);
}

function sum()
{
var x = parseFloat(document.getElementById("price").value);
var y = parseFloat(document.getElementById("acceptedKgMeters").value);
var z = x + y;
document.getElementById("total").value = z ;
}
  </script>
  </html>

I have removed the onkeyup() from the second column and kept it only in the third column, but it works both ways. 
I have also changed the table generation to var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
As it was creating a sort of LIFO system causing the addressing to be reversed. 

