Update a field in a repeater that's not connected to a dataset

I have a dataset called #dynamicDataset that is connected to a collection called Accounts. The Accounts collection has 2 fields ‘Amount’ and ‘Transaction Type’. I have a list repeater called #listrepeater that contains 3 fields. The first two fields are called #amount and #transactionType and are linked to #dynamicDataset. The 3rd field on #listrepeater is called #balance and is NOT connected to #dynamicDataset. The reason for this is that I want the #balance calculation to be calculated on the fly, every time the page loads.

Below is my code. The first 2 fields (Amount, Transaction Type) are populated correctly on screen, and the balance is worked out correctly (when I put in some logs). The problem is that the value of balance is not showing up on the list repeater. In the below snippet I marked where the code is not doing what I want it to do.

For clarity, if my collection contains 20 records, I need those 20 records to show up, and I need the balance to be calculated for each row, and the balance to show on screen for each record.

$w . onReady ( function () {
let previousBalance = 0 ;
$w ( ‘#listRepeater’ ). onItemReady (( $item , itemData , index ) => {
const amount = itemData . amount ;
const transactionType = itemData . transactionType ;
let calculatedBalance ;

    **if**  ( transactionType  ===  'Debit' ) { 
        calculatedBalance  =  amount  -  previousBalance ; 
    }  **else if**  ( transactionType  ===  'Credit' ) { 
        calculatedBalance  =  amount  +  previousBalance ; 
    } 

    $item ( '#balance' ). text  =  calculatedBalance ; <-- HELP! 
    previousBalance  =  calculatedBalance ; 
}); 

});

What is the difference between a NORMAL dataset and a DYNAMIC one?

A DYNAMIC one loads always just one row of data from your DATABASE.

For clarity, if my collection contains 20 records, I need those 20 records to show up, and I need the balance to be calculated for each row, and the balance to show on screen for each record.

So your listRepeater always just show one item ?
It will never show up all 20-items at once, because connected to dynamic dataset, right?

Another thing is, is your dynamic dataset already READY, when you start to get data from it?

$w.onReady(()=>{
	$w('#dynamicDataset').onReady(()=>{
		$w('#listRepeater').onItemReady(($item,itemData,index)=>{
					
			...
			...
			...
			
		});
	});
});

Some screenshots?

Hi please see a screenshot below, showing only first 5 records. My listRepeater is correctly returning all 20 rows (amount and transaction type). What I am missing is how to update the balance column on page load. The red text was added manually to show what I want to achieve (i.e. balance calculated depending on transaction type for each row).

$w.onReady(()=> {
    $w('#dataset1').onReady((event)=>{
        let previousBalance = 0; 
        $w('#listRepeater').forEachItem(($item, itemData, index) => {
          let calculatedBalance;         
          const amount = itemData.amount; 
          const transactionType = itemData.transactionType; 
          if (transactionType === 'debit') {
              calculatedBalance = previousBalance-amount;
              $item('#balance').text = calculatedBalance.toString();
            } else if (transactionType === 'credit') {
                calculatedBalance = previousBalance+amount;
            }
            $item('#balance').text = calculatedBalance.toString();
            previousBalance = calculatedBalance;
        });
    });
});

Man thanks!