javaScript カートの中が複数個になるとonclickが動かない

Question

spring　にて買い物カートを作成しています。
カート全件表示のHTML↓

|列1|列2|列3|｜
|:--|:--:|--:|
|リンゴ|a|－1|+1

上記のようにカートに入れたものが表示されます。
＋1ボタンを押すとaが1増え
－1ボタンを押すとaが1減る仕組みです。

１．カートに1個だけの時はカウントが
動きます。
|列1|列2|列3|｜
|:--|:--:|--:|
|リンゴ|a|－1|+1

２．下記のようにカートに複数追加されると
ボタンがすべて作動しなくなります。
|列1|列2|列3|｜
|:--|:--:|--:|
|リンゴ|a|－1|+1
|みかん|a|－1|+1

複数だと、id=a1が判別できなくなっているのではと思い、下記のソースコードにてonclick()の引数をa1からsession.cartから取得した${cart.id}を代入して試してみたが駄目でした。

			<table>
					<tr class="column">
						<td>商品名</td>
						<td>個数</td>
						<td>操作</td>
						<td></td>
					</tr>
					 <tr th:each="cart:${session.cart}">
						<td th:text="${cart.name}"></td>
						<td id="a1" th:text="${cart.count}" ></td>
						<td>
						    <input type="button" value="個数-1" onclick="subtractNum(a1);"/>
						    <input type="button" value="個数+1" onclick="addNum(a1);"/>
						    <input type="hidden" value="30" id="c1"/>
						</td>
						<td>

							 <form method="post" th:action="@{/cart/delete/}+${cart.id}">
							    <input type="submit" value="削除" class="delete"/>
							</form>
						</td>
					</tr>

				</table>
				<!-- ページリンク -->
				<div class="pageLink">
					<span>
						<span>1</span>
					</span>
				</div>
				<form action="" method="post">
					<span>
						<input type="hidden" name="itemId" value="1" />
						<input type="hidden" name="orderNum" value="1" id="b1"/>
					</span>
					<span>
						<input type="hidden" name="itemId" value="2" />
						<input type="hidden" name="orderNum" value="1" id="b2"/>
					</span>
					<input type="submit" value="ご注文のお手続き" />
				</form>

function addNum(count) {
	var num = count.innerText;
	var name = count.id;
	var lastNum = name.substr(1);
	var targetId1 = "b" + lastNum;
	var targetId2 = "c" + lastNum;
	var elm1 = document.getElementById(targetId1);
	var elm2 = document.getElementById(targetId2);
    var num2 = Number(elm1.value);
    var num3 = Number(elm2.value);
    num = Number(num);
    if (num3 > num) {
        num++;
	    num2++;
    }

	count.innerText = num;
    elm1.value = num2;
}

function subtractNum(count) {
	var num = count.innerText;
	var name = count.id;
	var lastNum = name.substr(1);
	var targetId = "b" + lastNum;
	var elm = document.getElementById(targetId);
    var num2 = Number(elm.value);
    num = Number(num);
    if (num > 1) {
        num--;
	    num2--;
    }

	count.innerText = num;
    elm.value = num2;
}

初心者でして、他にどう調べてよいか悩み質問致しました。
ヒントを頂けたらとても幸いです。
宜しくお願い致します。

Comments

[退会済みユーザー]

とりま、ループしたときに同じID（HTML attribute）が複数存在する状況をなおそう、話はそれからかな

[kiichan]

解答ありがとうございます。
</tr><tr th:each="cart:${session.cart}">
<td th:text="${cart.name}">
</td> <td th:id="${cart.id}" th:text="${cart.count}" ></td>
＊＊＊＊＊＊＊＊＊↑idを修正＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<td> <input type="button" value="個数-1" onclick="subtractNum(this.${cart.id});"/> <input type="button" value="個数+1" onclick="addNum(this.${cart.id});"/>
*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊↑引数の入れ方が間違っているのか

<input type="hidden" th:value="${cart.stock}" id="c1"/> </td> <td> <form method="post" th:action="@{/cart/delete/}+${cart.id}"> このようにidがループの際にかぶらないようにしましたが、this.${cart.id}と引数の書き方は正しいでしょうか？ページのソースを表示するとidはループ時にかぶらないようになりました。しょうがない質問すみません

[kiichan]

解決できました。アドバイスありがとうございました。

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。