JS循环同步输入值问题：仅替换当前修改项而非全部

问题 #

我有两组输入框，primary-list组的输入框已经加载了初始值。现在希望在name-calc-col组的输入框中输入内容时，只替换对应位置的primary-list组输入框的值，而不是清空所有原有值。

当前用的jQuery代码会循环遍历全部24个输入框，把name-calcX的空值也同步到ingredientX，导致没修改的项原有值被删除，请问怎么修改代码实现只替换当前修改的对应项？

现有HTML结构 #

<div class="primary-list">
  <input type="text" class="ingredient1" value="a11">
  <input type="text" class="ingredient2" value="a22">
  <input type="text" class="ingredient3" value="a33">
  <input type="text" class="ingredient4" value="">
  <input type="text" class="ingredient5" value="x00123">
  <input type="text" class="ingredient6" value="">
  ... 
  (总共24个输入框)
</div>

<div class="name-calc-col">
  <input type="text" class="name-calc1">
  <input type="text" class="name-calc2">
  <input type="text" class="name-calc3">
  <input type="text" class="name-calc4">
  <input type="text" class="name-calc5">
  <input type="text" class="name-calc6">
  ... 
  (总共24个输入框)
</div>

现有JS代码 #

$(".name-calc-col").children().on('input', function(){
    var name = [];
    
    for (let x = 1; x <= 24; x++) {
        name[x] = $(".name-calc" + x).val();
        name[x] = name[x] ? name[x] : "";

        $(".ingredient" + x).val(name[x]); 
    }
});

解决方法 #

问题出在原代码每次触发输入事件时都会遍历所有24个输入框，把空值同步过去覆盖原有内容。我们只需要针对当前正在输入的那个输入框做对应同步即可：

修改后的JS代码（依赖class序号） #

$(".name-calc-col").children().on('input', function(){
    // 从当前输入框的class里提取序号
    const idx = $(this).attr('class').match(/name-calc(\d+)/)[1];
    // 获取当前输入框的值
    const inputVal = $(this).val();
    // 仅同步对应序号的ingredient输入框
    $(".ingredient" + idx).val(inputVal);
});

更健壮的版本（依赖输入框顺序） #

如果担心class命名规则变化导致正则失效，可以用输入框的索引来匹配，只要两组输入框的顺序完全对应就能正常工作：

$(".name-calc-col").children().on('input', function(){
    // 获取当前输入框在组内的索引（从0开始），转成从1开始的序号
    const idx = $(this).index() + 1;
    const inputVal = $(this).val();
    $(".ingredient" + idx).val(inputVal);
});

说明 #

两种写法都只处理当前触发输入事件的那个元素，不会遍历全部24个输入框，未修改的primary-list输入框原有值会被完整保留，完全符合需求。

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