Add Up All Javascript Divs For Total Amount

Question

Okay, So I have a javascript function setup to add a div with an ID up and total it, and have the value displayed at the top. Well It works fine and all, But Due to it being multiple Id's I'm confused on how to get the total number!

function GetCost(ID) {
    var cost = $('#Cost'+ID).val();
    var income = $('#Income'+ID).val();
    var owned = $('#Own'+ID).val();
    var new_cost = number_format(cost * owned / 10 + 1000);
    $('#PropCost'+ID).html('Cost: $'+new_cost);
    $('#TotalIncome').html(number_format(income * owned));
}

As you can see it's with a Div plus an ID. Well here's the HTML with multiple divs. They're split up with different Id's Such as: owned1 And then for instance owned2.

<!-- Property Start-->
<div id="PropBlock">
<form action="javascript:void" method="post">
<div id="PropName">News Stand</div>
<div align="center"><img src="http://cdn0.mobwarsapp.com/rpg_images/opensocial/mob/ingame/territory/big/newsstand.gif" /></div>
<div id="PropIncome">Income: $100</div>
<div id="PropCost1" class="PropCost">Cost: $1,000</div>
<div id="PropOwn" align="center">
Own: <input type="text" ID="Own1" value="0" size="3" maxlength="5" onkeyup="GetCost(1)" />
</div>
<div id="PropBuy">
<select id="Numbers1">
 <option value="1">1</option>    
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option> 
</select>
<input type="submit" value="Calculate" onClick="CalcProp(1)" />
<input type="hidden" id="Cost1" value="1000" />
<input type="hidden" id="Income1" value="100" />
<input type="hidden" id="Name1" value="News Stand" />
</form>
</div>
</div>
<!-- Property End -->
<!-- Property Start-->
<div id="PropBlock">
<form action="javascript:void" method="post">
<div id="PropName">Empty Lot</div>
<div align="center"><img src="http://cdn0.mobwarsapp.com/rpg_images/opensocial/mob/ingame/territory/big/empty_lot.gif" /></div>
<div id="PropIncome">Income: $100</div>
<div id="PropCost2" class="PropCost">Cost: $4,500</div>
<div id="PropOwn" align="center">
Own: <input type="text" ID="Own2" value="0" size="3" maxlength="5" onkeyup="GetCost(2)" />
</div>
<div id="PropBuy">
<select id="Numbers2">
 <option value="1">1</option>    
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option> 
</select>
<input type="submit" value="Calculate" onClick="CalcProp(2)" />
<input type="hidden" id="Cost2" value="4500" />
<input type="hidden" id="Income2" value="100" />
<input type="hidden" id="Name2" value="Empty Lot" />
</div>
</form>
</div>
<!-- Property End -->

Here's The Income Div.

<div id="Basic" align="center">Basic Properties: (Income: $<span id="TotalIncome">0</span>)</div>

Well, How it's a onkeyup Function, When I change the form for the property1. It will display the math total. But if I change the form for property2 it will display the total math for property 2. How would I have it add the 2 up and display the total for both added up? I'm going to have about 15 different ones and when you change the value, So I'm kind of confused on what to do, Please help!! Thanks!! To understand what I'm talking about, Here's my sites link: http://psychowars.net/addtrain/property_cost

Answer 1

I'm not exactly sure what you want. Assuming you want to get the total (sum of all income*owned) and put it on #TotalIncome , Here you have (replace your GetCost by all this):

//Just calculates. Doesn't affect UI
function getCostsById(ID) {
    var cost = $('#Cost'+ID).val();
    var income = $('#Income'+ID).val();
    var owned = $('#Own'+ID).val();
    var new_cost = cost * owned / 10 + 1000;        
    return {
       cost: cost,
       income: income,
       owned: owned,
       new_cost: new_cost
    };
}

//I assume total is sum of every income*owned
function getTotalCost(){
    var total = 0;
    for(var id=1; id<=10; id++){
        var costs = getCostsById(id)
        total += costs.income * costs.owned;
    }
    return total;
}

//This affects UI
function GetCost(ID){
    var costs = getCostsById(ID);    
    $('#PropCost'+ID).html('Cost: $'+number_format(costs.new_cost) );
    $('#TotalIncome').html(number_format(getTotalCost()));
}

Cheers, from La Paz, Bolivia

Answer 2

The #TotalIncome is revised with only the income from the most recently edited property. It needs to also include all the other property locations when calculating the total. Just revamp the calculated function.

$('#TotalIncome').html((income * owned));

To this:

var sum = 0;
$('[id^="Own"]').each(function(){
    var id = $(this).attr('id');
    id = id.replace("Own","");
    sum += (( $('#Income'+id).val())*$('#Own'+id).val())
});
$('#TotalIncome').html(sum);