showing total in table

showing total in table

please help, cannot sum table column.

this is my code :

< div class = "content-wrapper" >
<!-- Content Header (Page header) -->
< section class = "content-header" >
< h1 >
Customer List
</ h1 >
< ol class = "breadcrumb" >
< li >< a href = "home_admin" >< i class = "fa fa-dashboard" ></ i > Home </ a ></ li >
< li class = "active" > Vendor - Customer </ li >
</ ol >
</ section >

<!-- Main content -->
< section class = "content" >
<!-- Small boxes (Stat box) -->
<!-- /.row -->
<!-- Main row -->
< div class = "row" >
<!-- Left col -->
< section class = "col-lg-12 connectedSortable" >
< table class = "table table-striped table-bordered data display nowrap"
style = " width:100%"
id = "data" >
< thead >
< tr >
< th > ID </ th >
< th > Name </ th >
< th > Address </ th >
< th > City </ th >
< th > Mobile </ th >
< th > Receivables </ th >
</ tr >
</ thead >
< tbody >
<?php foreach ( $vendor as $s ) { ? >
< tr >
< td > <?php echo $s -> VendorId ? > </ td >
< td > <?php echo $s -> name ? > </ td >
< td style = " word-wrap: break-word;min-width: 160px;max-width: 300px;white-space:normal;" > <?php echo $s -> address ? > </ td >
< td > <?php echo $s -> city ? > </ td >
< td > <?php echo $s -> Hp1 ? > </ td >
< td class = "text-right" > <?php echo number_format ( $s -> Balance ); ? > </ td >
</ tr >
<?php } ? >
</ tbody >
< tfoot >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td class = "text-right" > Total : </ td >
< td class = "text-right" id = "tot" ></ td >
</ tr >
</ tfoot >
</ table >
</ section >
<!-- right col -->
</ div >
<!-- /.row (main row) -->

</ section >
<!-- /.content -->
</ div >

< script type = "text/javascript" >
jQuery . noConflict ();
jQuery ( document ). ready ( function ( $ ){
$ ( '.data' ). DataTable (
{
"pageLength" : 10 ,
"scrollX" : true
}
);
});

var table = document . getElementById ( "data" ), sumVal = 0 ;
$ ( table ). find ( 'tbody tr' ). each ( function () {
$ ( this ). find ( 'td' ). each ( function ( i ){
if ( i == 5 ){
sumVal = sumVal + parseFloat ( $ ( this ). text ());
}
});
});
document . getElementById ( "tot" ). innerHTML = sumVal ;
console . log ( sumVal );
< / script >