Javascript 当输入的数字和指示的数字之和不同时，如何显示按钮

我正在寻找一种方法，当输入字段中输入的数字之和小于或大于8时，显示错误按钮。输入字段位于PHP循环生成的HTML表中

我在HTML循环中编写了以下代码：

<tr class="new_row">
    <td>employee 1</td>
    <td><input class="position1" type="text"   value="8" placeholder="8"/></td>
    <td><input class="position2" type="text" value="0" placeholder="0"/></td>
    <td><input class="total" type="text" placeholder="8" disabled/></td>
    <td class="ee"> </td>
</tr>

员工1

和JS

$('input').on('change', function () {
    var scope = $(this).closest('.new_row'),
        pos1 = $('.position1', scope).val(),
        pos2 = $('.position2', scope).val(),

        total = $('.total', scope),
        error = $('.error', scope);
    if ($.isNumeric(pos1) && $.isNumeric(pos2)) {

    var suma = Number(pos2)+ Number(pos1);
    if(suma !== 8)
    {
    var r= $("<a href='#' class='btn btn-danger mr5 mb10' >!!!</a>");
        $(".ee").append(r);
        total.val(suma + 'h');
    }else
    {

        error.val("ok");
        total.val(suma + 'h');
    }

    } else {
        total.val('');
    }
});

$（'input'）。关于（'change'，函数（）{
var scope=$（this）.closest（'.new_行'），
pos1=$（'.position1'，scope.val（），
pos2=$（'.position2'，scope.val（），
总计=$（'.total'，范围），
错误=$（'.error'，范围）；
如果（$.isNumeric（pos1）和&$.isNumeric（pos2））{
var suma=编号（pos2）+编号（pos1）；
如果（suma！==8）
{
var r=$（“”）；
$（“.ee”）。追加（r）；
总值（suma+‘h’）；
}否则
{
error.val（“ok”）；
总值（suma+‘h’）；
}
}否则{
总计。val（“”）；
}
});

这里有两个问题。 1） 当不满足条件时，错误按钮出现并保持可见。而且还增加了更多。我希望错误按钮在用户更正数据后消失。

---

2） 错误按钮出现在每一行中。即使在那些总和等于8的情况下。我希望JS代码只分别从每一行获取数据。

检查以下代码。演示可用

//将重新计算函数绑定到行
$（“.new_行”）。关于（“重新计算”，函数（）{
var范围=$（此）；
//清除以前的错误（如果存在）
scope.find（“.ee”）.html（“”）；
var总和=0；
//或查找所有输入，排除总计，f.e..find（“输入：非（.total）”）
查找（“.position1，.position2”）。每个（函数（）{
var val=parseInt（$（this.val（））；
如果（！isNaN（val））{
sum+=val；
}否则{
总和=未定义；
}
});
//将总计设置为输入
范围。查找（“.total”）.val（！！sum？（sum+“h”）：“”）；
如果（总和=8）{
//添加错误
scope.find（“.ee”）.append(
$("")
);
}
}).触发（“重新计算”）；
//检测场变化
$（'.new_row input'）。on（'change'，function（）{
$（this）.closest（“.new_row”）.trigger（“重新计算”）；
});

//bind recalculate function to row
$(".new_row").on("recalculate", function(){
    var scope = $(this);
  //clear previous error, if exist
  scope.find(".ee").html("");

  var sum = 0;
  //or find all inputs, exclude total, f.e. .find("input:not(.total)")
  scope.find(".position1, .position2").each(function(){
    var val = parseInt($(this).val());
    if(!isNaN(val)){
        sum += val;
    }else{
        sum = undefined;
    }
  });

  //set total to input
  scope.find(".total").val(!!sum ? (sum + "h") : '');

  if(sum !== 8){
    //add error
    scope.find(".ee").append(
        $("<a href='#' class='btn btn-danger mr5 mb10' >!!!</a>")
    );
  }

}).trigger("recalculate");

//detect field change
$('.new_row input').on('change', function () {
    $(this).closest(".new_row").trigger("recalculate");
});