I am building a small daily accounting system using Vanilla JavaScript.

The application has:

- Products with fixed prices

- Quantity inputs

- Dynamic totals

- Expenses

- Final summary calculations

My main issue is handling live values correctly.

Example:

When the user changes the quantity input:

sale.total = qty * product.fixedPrice

I want:

- The row total to update instantly

- The sales total to update instantly

- The net amount to update instantly

- The missing/difference amount to update instantly

Currently I am facing problems with:

- Values becoming out of sync

- DOM values being used as the source of truth

- Index-based updates breaking after re-render

- Dynamic rows losing state after rendering

- Event listeners breaking after replacing innerHTML

My current architecture is something like:

const state = {

    products: [],
    
    sales: [],
    
    expenses: []

}

Questions:

1. What is the proper way to handle “live values” in Vanilla JS applications?

2. Should calculations always come from state instead of DOM?

3. Is full re-rendering after every input change acceptable in small apps?

4. What is the best pattern for dynamic tables with calculated fields?

5. How do developers usually avoid index-related bugs in dynamic tables?

I am trying to understand the correct architectural approach, not only patch the current code.