looping through multiple forms javascript

Hi

I want to build a page that allows user to add an unlimited number of identical forms with incremented ID's, one for loan balance, another for interest rate and then two more for term in years and term in months.

The script needs to loop through and perform the same calculations on each form adding the total repayment figures together.

I could build a code which had a single form and looped through an infinite number of text inputs but when I tried to add multiple inputs I for each calculation I figured I would have to make the script insert incremented forms and loop through these rather than the individual inputs in order to seperate the inidividual calculations from each other.

I put this code together which is not working, can someone explain to me how my coding is incorrect? I don't want a cut and paste solution but just to get an understanding of how my code is not working correctly. I am assuming it is not accessing the element in the DOM correctly.

<div id="dynamicInput">
<form id="newform" name="newform" class="loans">
<input type="text" id="balance" name="balance" class="balance"><input type="text" id="rate" name="rate" class="rate">
</form>
<input type="button" class="cleanbutton" onclick="addInput('dynamicInput');" value="Add Loan"><p id="addition"></p>
     <input  name="Submit" type="button" class="cleanbutton" id="Submit"  onclick="sum(document.forms)" value="Submit"/>
</div>
</div>

var counter = 1;
function addInput(divName){
          var newdiv = document.createElement('form');
          newdiv.innerHTML = '<input type="text" id="balance'+(counter+1)+'" name="balance'+(counter+1)+'" class="balance"><input type="text" id="rate'+(counter+1)+'" name="rate'+(counter+1)+'" class="rate">'
          document.getElementById(divName).appendChild(newdiv);
          counter++;

}
var forms = document.getElementsByTagName("form");
function sum(forms) {
var number=0;
var i;
var f;
for ( i = 0; i < forms.length; i++ ) {
if (forms.elements.type== 'text') {   <-- (this website forced me to add a closing tag
var a=parseFloat(forms.elements[0].value);
var b=parseFloat(forms.elements[1].value);
var f=(a*b);
number+=f;};}
document.getElementById('addition').innerHTML=number;}