title: Intl tel input change dropdown dialcode from another dropdown
body: <p>Trying to resolve issue using intl tel input plugin.</p>
  
  <p>Based on this example <a href="https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html" rel="nofollow noreferrer">https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html</a>, The #phone flag and #country text is changing vice versa but I would like the dialcode to change on the phone number field, also sometimes the flags overlap eachother, any help? thanks</p>
  
  <pre><code>var countryData = window.intlTelInputGlobals.getCountryData(),
  input = document.querySelector("#phone"),
  countryDropdown = document.querySelector("#country");
  
  intlTelInput(input, {
      allowDropdown: true,
      autoHideDialCode: false,
      autoPlaceholder: "off",
      dropdownContainer: document.body,
      preferredCountries: ['jp'],
      separateDialCode: true,
      customContainer: "col-md-12 no-padding intelinput-styles",
      //utilsScript: "assets/js/utils.js"
  });
  
  
  var iti = intlTelInput(input, {
      utilsScript: "./utils.js" 
  });
  
  for (var i = 0; i &lt; countryData.length; i++) {
      var country = countryData[i];
      var optionNode = document.createElement("option");
      optionNode.value = country.iso2;
      var textNode = document.createTextNode(country.name);
      optionNode.appendChild(textNode);
      countryDropdown.appendChild(optionNode);
  }
  
  
  input.addEventListener('countrychange', function(e) {
      countryDropdown.value = iti.getSelectedCountryData().iso2;
  });
  
  countryDropdown.addEventListener('change', function() {
      iti.setCountry(this.value);
  });
  </code></pre>