基于Javascript实现页面商品个数增减功能

Map<GoodsVO, Integer> cart = new HashMap();
cart.put(new GoodsVO(1001,"苹果",100),5);
cart.put(new GoodsVO(1002,"桔子",300),3);
cart.put(new GoodsVO(1003,"香蕉",150),3);
request.getSession().setAttribute("cat",cart);

<c:forEach items="${cart}" var="item">
	<tr>
        <td>${item.key.name}</td>
        <td>
            <span id="subSpan${item.key.id}" class="subSpan">-</span>
            <input type="text" id="amountInput${item.key.id}" value="${item.value}" style="width: 40px;">
            <span id="addSpan${item.key.id}" class="addSpan">+</span>
            <input type="hidden" id="stockInput" value="${item.key.stock}">
        </td>
    </tr>
</c:forEach>
<script src="assets/js/jquery3.6.0.js"></script>
<script>
    //购买商品数量减1
    $(".subSpan").click(function () {
        let subSpanId = $(this).attr("id");
        let id = subSpanId.substring(7);
        let amount = $("#amountInput" + id).val();
        if (amount - 1 <= 0) {
            alert("所购商品数量不能小于等于0");
            return;
        }
        $("#amountInput" + id).val(amount - 1);
    })
    //购买商品数量加1
    $(".addSpan").click(function () {
        let addSpanId = $(this).attr("id");
        let id = addSpanId.substring(7);
        let amount = $("#amountInput" + id).val();
        let stock = $("#stockInput").val();
        if (amount > stock) {
            alert("所购商品数量不能大于库存");
            return;
        }
        $("#amountInput" + id).val(amount + 1);
    })
</script>

<div class="jia_jian">
   <img class="jian" style="height: 25px;width: 21px;" src="images/jian.jpg"/>
    <input class="shuliang" type="text" value="1"/>
    <img class="jia" style="height: 25px;width: 21px;" src="images/jia.jpg"/>
    <input type="hidden" value="5">
</div>
<script type="text/javascript">
    //购买商品数量减1
    $(".jian").click(function () {
        let amount = $(this).next().val();
        if (amount - 1 <= 0) {
            alert("所购商品数量不能小于等于0");
            return;
        }
        $(this).next().val(amount - 1);
    })
    //购买商品数量加1
    $(".jia").click(function () {
        let amount = $(this).prev().val();
        let stock = $(this).next().val();
        if (amount >= stock || amount>=200) {
            alert("所购商品数量不能大于库存 或 最多只能买200个");
            return;
        }
        $(this).prev().val(1+Number(amount));
    })
</script>