如何使用JavaScript/jQuery为两个独立输入框分别追加国家区号

两个手机号输入框分别接入intlTelInput插件实现国家区号选择功能时，操作任意一个输入框选择国家，都会连带修改另一个输入框的内容，无法实现两个输入框区号选择逻辑独立生效。
当前页面包含两个手机号表单项：

• id为smsno的SMS号码输入框
• id为whtspno的WhatsApp号码输入框
  两个输入框均已完成intlTelInput实例初始化，逻辑异常的根因为：
• 国旗选择容器的点击事件通过全局类选择器.iti__flag-container绑定，未区分事件触发的所属输入域
• 区号获取逻辑全局查找.iti__selected-flag元素，默认取到第一个实例的选中国旗
• 区号赋值逻辑硬编码仅操作#smsno输入框，未关联当前操作对应的输入域

替换原有$(document).ready)块内的事件绑定代码即可，修复后完整逻辑如下：

$(document).ready(function() {
  // 遍历所有intlTelInput生成的国旗选择容器
  $('.iti__flag-container').each(function() {
    // 缓存当前容器关联的输入框元素（国旗容器与输入框为同级DOM节点）
    const $targetInput = $(this).siblings('input.form-control');
    
    // 为当前容器绑定国家项点击事件
    $(this).on('click', '.iti__country', function() {
      // 仅在当前容器范围内查找选中国旗的标题，提取国家区号
      const flagTitle = $(this).closest('.iti__flag-container').find('.iti__selected-flag').attr('title');
      const countryCode = flagTitle.replace(/[^0-9]/g, '');
      
      // 清除输入框原有旧区号前缀，保留用户输入的号码内容
      const pureNumber = $targetInput.val().replace(/^\+\d+\s/, '');
      // 仅给当前关联输入框写入新区号+号码
      $targetInput.val(`+${countryCode} ${pureNumber}`);
    });
  });
});

• 遍历每个国旗容器单独绑定事件，提前缓存关联的输入框对象，避免全局查找匹配错误
• 所有DOM查询操作限定在当前触发事件的容器范围内，不会跨实例获取元素
• 赋值操作仅针对当前容器关联的输入框，同时自动清理旧的区号前缀，避免多次切换国家导致区号重复拼接

内容的提问来源于stack exchange，提问作者V.K