Need Assistance with "Add ROW, DELETE ROW and Total SUM

Question

Please assist me I need two seperate script in one table. 

I am trying to create a Purchase order. 

 

(Output )

Quantity         Rate          Total         Tax         Final Cost 

    10             12.20         112.00        1.7           190.40 

    10             11.10         111.00         1.7          188.70

 

                  Total             223.00                        379.10 

 

* Everything in Pink is Auto calculated 

* Rest is manual ( Quantity, Rate and Tax ) is user input.

 

Script 1 - Add, Delete ROW and Script 2 - Add SUM (total)

 

I am trying to combine this script but its not working. Please assist. 

 

SCRIPT 1 CODE : ADD SUM

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
$(this).css("background-color", "#FEFFB0");
}
else if (this.value.length != 0){
$(this).css("background-color", "red");
}
});
$("#sum").html(sum.toFixed(2));
}
</script>
<script src="jquery.tableTotal.js"></script>

SCRIPT 2 : ADD ROW /DELETE ROW

<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>

// Table CODE

<TABLE id="dataTable" width="350px" border="0">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

Any help is greatly appreciated.