如何使用JavaScript和jQuery为多个输入字段独立添加国家代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/css/intlTelInput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-row">
    <div class="form-group col-md-6 smsForm">
        <label for="smsno">SMS No.</label>
        <input type="tel" class="form-control" name="smsno" id="smsno" placeholder="Type contact1 number here...." pattern="[7-9]{1}[0-9]{9}" required />
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Please enter valid contact no.</div>
    </div>
    <div class="form-group col-md-6 whatsappForm">
        <label for="whtspno">WhatsApp No.</label>
        <input type="text" class="form-control" name="whtspno" id="whtspno" placeholder="Type contact2 number here...." pattern="[7-9]{1}[0-9]{9}" required />
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Please enter valid contact no.</div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

// 初始化 intlTelInput 实例
const phoneInputField = document.querySelector("#smsno");
const phoneInputField2 = document.querySelector("#whtspno");

// 为每个输入框独立初始化 intlTelInput
const phoneInput = window.intlTelInput(phoneInputField, {});
const phoneInput2 = window.intlTelInput(phoneInputField2, {}); 

// 页面加载时的表单验证逻辑（如果需要）
window.addEventListener('load', function() {
  var forms = document.getElementsByClassName('needs-validation');
  var validation = Array.prototype.filter.call(forms, function(form) {
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  });
}, false);

// 使用 jQuery 监听国旗点击事件
$(document).ready(function() {
  // 监听 SMS No. 输入框的国旗点击事件
  $('.smsForm .iti__flag-container').click(function() { 
    // 获取当前选中国旗的标题，其中包含国家代码
    var countryCode = $('.smsForm .iti__selected-flag').attr('title');
    // 从标题中提取纯数字的国家代码
    countryCode = countryCode.replace(/[^0-9]/g,'');
    // 清空当前输入框的值，然后预置国家代码
    $('#smsno').val("");
    $('#smsno').val("+" + countryCode + " " + $('#smsno').val());
  });

  // 监听 WhatsApp No. 输入框的国旗点击事件
  $('.whatsappForm .iti__flag-container').click(function() {
    // 获取当前选中国旗的标题，其中包含国家代码
    var countryCode = $('.whatsappForm .iti__selected-flag').attr('title');
    // 从标题中提取纯数字的国家代码
    countryCode = countryCode.replace(/[^0-9]/g,'');
    // 清空当前输入框的值，然后预置国家代码
    $('#whtspno').val("");
    $('#whtspno').val("+" + countryCode + " " + $('#whtspno').val());
  });
});