I’m building a certain type of calculator that does some stuff with interest rates and a loan amount. I want to be able to compare different loan stats based on the interest rate percentage. So, if I enter 50000 as the loan amount and want to see some stats based on a 4% interest rate and a 6% interest rate, I’ll get a dynamically added table with those calculations.
So, a user can enter as many interest rates as he/she wants for comparison and see different stats (like, how long it will take to pay off) of the loan amount.
Problem: Since users can enter as many percentage rates as they want (dynamically inserted ), I have to loop over each one to calculate stuff. I got that down, but if the page does not re-load and the user clicks the link to add another input box to compare another percentage rate and then clicks the button to calculate again, the new percentage rate is added to the table PLUS all of the previous percentage rates added again.
I know why this is happening ( I guess it’s expected with .each() ), but how do I code it so the table will only add the new cell and not the new cell + all of the old cells again.
Sorry, for the long explanation. Click the link below to see what a working example. Remember, add some % rates and loan amount and click calculate, but don’t refresh and add some more % rates and click calculate again. Don’t worry about the math or how I’m getting the numbers. It doesn’t matter for now; I’m just trying to get the preliminary stuff to work. THanks.!
I would suggest clearing and rebuilding the tables rows each time.
From what i saw the problem is that you are not getting rid of the previous cells.
So you can easily add a new cell for the each input, but be sure to remove the previously added cells first.