jQuery动态创建input时无法限制生成元素最大数量问题求助

现有代码核心问题是未在点击新增按钮时判断当前输入框数量是否超限，且初始化的数量判断逻辑只会执行一次，删除输入框后无法恢复新增功能。以下是调整后可实现「输入框数量超过10就停止新增」的完整代码：

修正后的JS代码 #

$(document).ready(function(){
  // 按照需求设置最大输入框数量为10
  const max_inputs = 10;
  let i = $('.product-options').length;
  let number = Math.floor($('.product-options').length / 3); // 每次新增1组带3个输入框，按组计数保证name属性不重复

  // 绑定新增按钮点击事件
  $('.add_field_button').click(function(e){
    e.preventDefault();
    // 每次点击先判断当前已有的输入框总数量是否达到上限
    const currentInputCount = $('.product-options').length;
    if(currentInputCount >= max_inputs) {
      // 达到上限可根据需要添加提示，不需要直接删除alert行即可
      alert('最多只能添加10个输入框');
      return;
    }
    number++;
    i++;
    $('.form-product').append(`<span id="row${i}" class="myinput" style="transition:1s ease;">
      <div class="form-group"> 
        <div class="col-sm-7">  
          <input type="text" class="form-control product-options" name="childen${number}" value="" placeholder="选项名称">
        </div>
        <div class="col-sm-3"> 
          <input type="text" class="form-control product-options" name="childprice${number}" value="" placeholder="选项价格">
        </div>  
      </div> 
      <div class="form-group"> 
        <div class="col-sm-7">  
          <input type="text" class="form-control product-options" name="childsrb${number}" value="" placeholder="塞尔维亚语选项名称">
        </div>
        <button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button>
      </div>
    </span>`);
  });

  // 删除输入框组逻辑
  $(document).on('click', '.btn_remove', function(){
    const button_id = $(this).attr("id"); 
    $(`#row${button_id}`).remove();
    number--;
    i--;
  });            
});

调整说明 #

• 把上限值max_inputs修改为要求的10，每次点击新增按钮前先统计当前已有的.product-options类输入框总数量，达到上限直接终止新增逻辑
• 移除了初始化时仅在inputs < 2才绑定点击事件的错误逻辑，保证删除输入框后数量低于上限时还可以继续新增
• 用模板字符串重写了拼接的DOM代码，可读性更强，不容易出现引号拼接错误
• 如果要限制的是10组输入框（每组3个，总共30个输入框），只需要把计数判断的逻辑改成if(number >= 10)即可，可根据实际需求调整判断规则

原有HTML代码无需修改，可直接沿用 #

<div class="form-group product-option">
  <label class="col-sm-2 control-label"></label>
  <div class="col-sm-10 product-option">
    <button type="button" class="add_field_button on-hover" style="background: none; border:none;">
      <i class="fas fa-plus on-hover" style="cursor: pointer"></i>
    </button>
    <label for="option">Product options</label><br>
    <div class="form-group product-option form-product">
    </div>
  </div>
</div>

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