Laravel foreach循环下JavaScript实现逐行动态求和的问题

你的代码出现「所有输入值混算、结果只显示在第一行」的问题，核心是两个基础实现错误：

• 违反HTML规范：Blade循环生成的元素用了固定重复的id（item1/item2/result每一行生成的内容完全一致），而浏览器对重复id只会识别页面上第一个出现的元素，所有通过#result定位元素的逻辑，自然只会把内容写到第一行的结果区。
• 计算范围没有做行级隔离：原JS直接全局选中所有.prc输入框做累加，也没有逻辑定位「当前触发输入的内容属于哪一行、对应的结果该输出到哪个位置」，自然会把所有行的数值合并计算。

第一步：修改Blade模板结构 #

核心调整点：

• 删掉所有循环内的固定重复id
• 给每一行加一个独立的行级容器，把当前行的输入、输出元素都包裹在里面，方便JS精准定位关联元素
• 给结果输出元素加统一的class，替代原来的重复id

调整后的模板代码：

@foreach($users as $user)
    {{-- 行级独立容器，包裹当前行所有关联元素 --}}
    <div class="form-row row-item">
        <div class="form-group">
            <input type="number" class="prc form-control" name="item1[]">
        </div>
        <div class="form-group">
            <input type="number" class="prc form-control" name="item2[]">
        </div>
        <output class="line-result form-group"></output>
    </div>
@endforeach

原有的name="item1[]"、name="item2[]"的数组命名规则完全保留，不影响Laravel后端接收表单时的数组取值逻辑。

第二步：调整JS计算逻辑 #

核心逻辑调整：

1. 触发输入事件时，先通过closest()找到当前输入框所属的行级容器，把计算范围完全锁在当前行内部
2. 只遍历当前行范围内的.prc输入框累加数值
3. 只把累加结果写到当前行对应的结果输出元素上
4. 用事件委托的方式绑定事件，适配循环生成、甚至后续动态新增的行元素

调整后的JS代码：

// 事件绑定用document做全局委托，兼容循环/动态生成的元素
$(document).on('input', '.prc', function(){
    // 锁定当前输入框所在的行容器，作为本次计算的唯一范围
    const $currentRow = $(this).closest('.row-item');
    let totalSum = 0;
    // 仅在当前行范围内遍历所有数值输入框计算和
    $currentRow.find('.prc').each(function(){
        const inputVal = $(this).val();
        if($.isNumeric(inputVal)){
            totalSum += parseFloat(inputVal);
        }
    });
    // 仅更新当前行的结果展示，不影响其他行
    $currentRow.find('.line-result').text(totalSum);
});

相比原来把事件绑在每个.form-group上的写法，这种全局委托的方式不管页面渲染多少行、后续动态新增多少行，都不需要重新绑定事件，性能和兼容性更好。

调整完成后，每一行的两个输入框触发值变化时，只会计算当前行两个框的数值和，结果也只会展示在当前行的输出区域，不同行的计算完全隔离，不会出现跨行累加、结果串到第一行的问题。

内容的提问来源于stack exchange，提问作者Ahsan