Hi I have some javascript that I am trying to adapt to give the remaining budget from a set value as the user makes selections from a form.

Code:
<script type="text/javascript">
$(document).ready(function()
{	
var total = 5500;
	
function calcTotal()
	{
		$("input:checked").each(function()
		{
			//This happens for each checked input field
			var value = $(this).attr("id");
			total -= parseInt(value); 
		});
	}

//This happens when the page loads
calcTotal();
$(":submit").before('<p class="total">REMAINING</p><p class="total-value">£' + total + 'm</p>');
		
$("input:checkbox, input:radio").click(function()
	{
		total = 5500;
		calcTotal();
		$("p.total").html("REMAINING</p><p class='total-value'>£" + total + "m</p>");
	});
});
</script>
The form start out as it should with "REMAINING £5500m" but then when I start making selections from the form I am getting "REMAINING £4640m £5500m" for example. Does anybody know why this is. It was working fine until I started trying to style up my page.

This is the part of the form where I want it to be entered:

Code:
<div id="budget">
                    <div><p class="budget">BUDGET</p><p class="budget-value">£5500m</p></div>
                </div>
                <div id="submit">
                    <input type="submit" value="Submit Team" class="button">
                </div>
I would like it to insert it like this if possible:

Code:
<div id="budget">
                    <div><p class="budget">BUDGET</p><p class="budget-value">£5500m</p></div>
<div><p class="total">BUDGET</p><p class="total-value">£5500m</p></div>
                </div>
                <div id="submit">
                    <input type="submit" value="Submit Team" class="button">
                </div>