Intl-tel-input country codes getting overlapped when choosing new value

Question

I have a simple code, where I am adding intl-tel-input to all tel input fields. My problem is when I select another country, it is showing the country codes like the image shared.

  var iti = $('input[type=tel]').intlTelInput({
                preferredCountries: false,
                separateDialCode: true,
                autoPlaceholder: "aggressive"
            })

Answer 1

I had encountered this problem recently. My mistake was initializing same input the second time. Check if you have same situation as mine.

Answer 2

I think you need to do the code this way:

let iti;
if(iti != null){
      iti.destroy();
}
function initializeTel() {
      var input = document.getElementById("myInternationalPhone");
    iti =intlTelInput(input, {
            //allowDropdown: false,
            //autoHideDialCode: true,
            // autoPlaceholder: "off",
            // dropdownContainer: document.body,
            // excludeCountries: ["us"],
            // formatOnDisplay: false,
            /*geoIpLookup: function(callback) {
                  $.getJSON('http://ipinfo.io', function(response){
                        console.log(JSON.stringify(response, null, 2));
                        var countryCode = (response && response.country) ? response.country : "ae";
                        callback(countryCode);
                  });
            },*/
            hiddenInput: "internationalphone",
            //initialCountry: "auto",
            // localizedCountries: { 'de': 'Deutschland' },
            nationalMode: true,
            // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
            //placeholderNumberType: "MOBILE",
            preferredCountries: ["sa", "ae", "jo", "kw", "qa", "bh", "om", "eg", "ye", "lb", "sy", "iq", "sd", "ma", "tn", "aj", "dz", "ly", "mr"],
            separateDialCode: true,
            utilsScript: serverstaticpathPHP + "/assets/js/internationPhoneCode/build/js/utils.js",
      });
}
/* End of International Phone*/
$(document).ready(function(){
      initializeTel();

});