Please, I need help for a project I am doing. I am new to web development and programming.
I am trying to update a shopping cart based on quantity entry in a text box. I am having diffuculty creating a function that would calculate a running total and update the cart item as often as the user choose to add one or the other or both items. the assignment requires use of javasricpt, css, and xhtml/html to feed the form input text box. It has to be two seperate divs with the same form name. and the cart total should be passed onto

<a href="cart.html" >Items in Cart</a><span id= "numberOfItems"> 0</span>



This is what I have so far for the html portion"

<div id="chips">
<img src ="chips.jpg" alt ="chips" width="100" height="100" id="chip"/>
<form name="quantity" id="quantity">
<p>Quantity:<input type="text" name="item1" size="15"/>
<input type="submit" name="submit" value="Add to Cart" onclick="add(document.quantity);"/>
<input type="reset" name="reset" value="submit Quantity"/>
</form>
</div>

<div id="drinks">
<img src ="drinks.jpg" alt ="drinks" width="100" height="100" id="drinks"/>
<form name="quantity" id="quantity">
<p>Quantity:<input type="text" name="item2" size="15"/>
<input type="submit" name="submit" value="Add to Cart" onclick="add(document.quantity);"/>
<input type="reset" name="reset" value="submit Quantity"/>
</form>
</div>


and for .js file, this is what I have that is barely workable:

var chip;
var drink;
var total1=0;
var total2=0;
var total=0;

function add(f)
{

if(f==document.quantity.item1.value)
{
chip=parseInt(f.item1.value);
total1=total1+drink;
}

if(f==document.quantity.item2.value)
{
drink=parseInt(f.item2.value);
total2=total2+drink;
}
total=total1+total2;
document.getElementById("numberOfItems").innerHtml=total;
}

Thanks for any help or suggestion