更新图像切换上的php会话变量

我正试图允许用户通过简单地单击图像来添加/删除购物车中的商品。我还希望在点击时更改图像，以显示已经购买了多少此商品。

最后，我希望购物车存在于同一页面的单独选项卡上。

到目前为止，我拥有的是：

<?php session_start(); ?>
...
...
<div style="display: block; width:1024px;">
<img id="image_id" src="image.png" width="110" height="110" style="margin-left:40px";>
<script>
$('#image_id').toggle(
    function() {
        $(this).attr('src','image1.png');
        <?php $_SESSION['cart']['image_id'] = 1; ?>
    },
    function() {
        $(this).attr('src','image2.png');
        <?php $_SESSION['cart']['image_id'] = 2; ?>
    },
    function() {
        $(this).attr('src','image3.png');
        <?php $_SESSION['cart']['image_id'] = 3; ?>
    },
    function() {
        $(this).attr('src','image.png');
    <?php// $_SESSION['cart']['image_id'] = 0; ?>
    }
);
</script>
...
...
</div>
<!-- Cart Tab -->
<div id="tab4" style="display:none; width:1024px; padding-top:40px;">
<table border="1">
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<?php
    if($_SESSION['cart']) {
        foreach($_SESSION['cart'] as $itemname => $quantity)
        {
            if($quantity == 0) continue;
            $price = $_SESSION['items'][$itemname];
            $prod = $price*$quantity;
            $_SESSION['total'] += $prod;
            echo "<tr>";
            echo "<td>" . $itemname . "</td>";
            echo "<td>" . $price . "</td>";
            echo "<td>" . $quantity . "</td>";
            echo "<td>" . $prod . "</td>";
            echo "</tr>";
        }
        echo "<tr>";
        echo "<td></td>";
        echo "<td></td>";
        echo "<td></td>";
        echo "<td>" . $_SESSION['total'] . "</td>";
        echo "</tr>";
        echo "</table>";
    }    
?>
<a href="#tab1">Continue Shopping</a>
</div>

我遇到的问题是图像更改正确（只有当我点击它并在四个不同的图像之间切换时才会更改），但当我查看购物车的内容时，它不会更改。它立即执行所有4个php语句。我知道，因为如果我移除最后的切换开关（将数量重置为0）并查看购物车，它已经显示我在点击一次之前有3件商品要购买。

如有任何帮助，我们将不胜感激。我猜我也可以将图像构建为表单输入，或者在点击时执行脚本的超链接，但我尝试了这两种方法，但都没有成功。

提前谢谢。