jquery实现购物车物品单项结算功能

这几天在写一个购物车的项目，其中有个问题困扰了我很久，就是在购物车列表中每件商品的价格小计问题。因为我的数据都是从数据库中经过foreach输出到页面上的，所以计算所需的值都是来自同一个id的数据，这样就会导致其中一个值变化其他商品的价格小计也会发生变化。如图

当我第一条数据的数量发生变化时，不仅第一条数据的小计会变化，其他数据的小计也会变成同样的值，这是我不希望看到的。

经过我对jquery的学习之后我设计了一种方法，因为网上找不到类似的解决方案，因此我希望我的方法能帮到大家。

代码如下：

方法：

function sum(){
    $("input[id=sum]").each(function(){
        $(this).val($(this).parent().prev().find("input[id=num2]").val()*$(this).parent().prev().prev().find("input[id=price]").val());
    })
}

循环部分代码：

<tbody>
           <c:forEach var="item" items="${p1 }"  >
               <tr>
                   <td>
                       <label>
                           <input type="checkbox" name="sports[]" />
                       </label>
                   </td>
                   <td>
                       <div class="media">
                      <div class="media-left">
                        <a href="#">
                          <img class="media-object" style="max-width: 60px;" src="${item.pro_portrait }" alt="...">
                        </a>
                      </div>
                      <div class="media-body">
                        <h4 class="media-heading"><a href="#">${item.pro_name }</a></h4>
                          <p>${item.pro_description }</p>
                      </div>
                    </div>
                   </td>
                   <td id="td1">¥<input id="price" class="price" style="width: 50px;" readonly="readonly" value="${item.pro_price }"/></td>
                   <td id="td2">
                       <button name="decrease" οnclick="decrease()">-</button>
                       <input type="text" id="num2" style="width: 50px;" class="num2" value="1" οnchange="summary()"/>
                       <button name="add" οnclick="add()">+</button>
                   </td>
                   <td id="td3">
                       ¥<input type="text" id="sum" value="${item.pro_price }" class="sum" readonly="readonly" style="width: 50px;"/>
                   </td>
                   <td>
                       <a href="" class="btn btn-sm btn-danger">
                           <i class="glyphicon glyphicon-remove"></i>删除
                       </a>
                   </td>
               </tr>
           </c:forEach>
           </tbody>

直接通过each方法来实现每个数据值的单独计算而不会相互影响

结果如下：