Dynamic added inputs each creates a total

Q. How can i reflect an accurate total of all totals from the inputs

(totals are the product of the first two columns/fields for each row)

When adding the totals, the total field is not incrementing for all fields as expected the total at the bottom should show a sum of all totals from the table, yet is showing only the last total

https://jsfiddle.net/ariia/g81kqro2/110/

$('body').on('change','.rowinput' , function(){
            var rowid=$(this).data('rowid');
           // alert(rowid);
             rowTotal(rowid);
          })
          
          function rowTotal(sumthis) {
        
            units = $('#row-'+sumthis+'-units').val()
            unitprice = $('#row-'+sumthis+'-unit-price').val()  
            rowtotal=units*unitprice
        
            $('#row-'+sumthis+'-total').val(rowtotal)
            invtotal(rowtotal)
        
          }
      function invtotal(totalz) {
           var totalx=0
            totalx = totalx+=totalz
        
        //alert(totalx)
        //return totalx
        $('#total>span').text(totalx)
      }

When placing the variable outside and not init to 0 each row, i get the desired effect with true totals, until i change the row total, say to a smaller total, the incorrect value then shows.