php and javascript calculation

我正在学习javascript，希望你们能帮助我。

这是我的代码

下面的代码用于显示我的数据库

中的成分名称

<?php
$q = pg_query("Select * FROM tblingredients");
while($r = pg_fetch_assoc($q)) {
     echo '
     <li>
     <a href="#" onclick="showOrder('''.$r_ing['ingredientid'].''', '.$r_ing['ingprice'].'); return     false;">'.$r_ing['ingredientname'].'</a><br>             
    </li>';
    } 
?>

然后我有这个单独的代码，用于显示上面所选成分的名称和价格。当用户点击上面的成分名称时，下面的代码将显示所选成分的名称和价格。

<?php 
$q_order = pg_query("Select * FROM tblingredients");
    while($r_order = pg_fetch_assoc($q_order)) {
    ?>
<div id="<?php echo $r_order['ingredientid'];?>" style="display: none;" class="cart_item">
<div class="item_amount">1x</div>
    <div class="item_name">
        <a href=""><?php echo $r_order['ingredientname']; ?></a> </div>
        <a title="Remove item" rel="tooltip" onclick="deleteItem(<?php echo $r_order['ingredientid'];?>)"    class="close" href="">×</a>
    <div class="item_cart_price"><?php echo $r_order['ingredientprice']; ?></div>
</div><!--cart_item-->
<?php $i++;} ?>

下面是我想显示所选食材的总价。

<div id="total"></div>

这是我的javascript代码，这是我的问题

<script type="text/javascript">
function showOrder(id, price) {
    document.getElementById(id).style.display = 'block';
    total = parseInt(price, 10);
    document.getElementById('total').innerHTML += total;
};
</script>

上面的javascript所做的只是连接一个价格，而不会添加价格。假设用户点击原料A价格为5，原料B价格为10，原料C价格为20

总显示如下-> 51020

我只是学习javascript，并试图将其应用到我的php代码。提前感谢您的答复。

如果用户使用上面的代码

单击X，我还希望删除所选的成分

<a title="Remove item" rel="tooltip" onclick="deleteItem(<?php echo $r_order['ingredientid'];?>)" class="close" href="">×</a>

谢谢。

function showOrder(id, price) {
    document.getElementById(id).style.display = 'block';
    price = parseInt(price, 10);
    oldTotal = parseInt(document.getElementById('total').innerHTML);
    if (isNaN(oldTotal)) {oldTotal = 0;}
    total = price + oldTotal;
    document.getElementById('total').innerHTML = total;
};