title: Loading jQuery International Telephone Input With Flags and Dial Codes Dynamically
body: <p>I have two options where I would like the intl tel input visible. First is hard coded into the html and second when a person selects the number from a drop down menu.</p>
  
  <p>The first one I have working fine. The second one I am having problems initializing. </p>
  
  <p>Does anyone know if there is something different I must add to get it to load dynamically?</p>
  
  <p>Here is my code for both.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=""&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
     &lt;!-- JQuery --&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /&gt;
      &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- International Phone Input --&gt;
      &lt;link rel="stylesheet" href="build/css/intlTelInput.css"&gt;
      &lt;script src="build/js/intlTelInput.js"&gt;&lt;/script&gt;
  
      &lt;title&gt;Test Page&lt;/title&gt;
  
      &lt;!-- Custom --&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;label&gt;Phone Number:&lt;/label&gt;
      &lt;br&gt;
      &lt;br&gt;
       &lt;label class='phoneDiv'&gt;&lt;/label&gt;&lt;input id="phone" type="tel"
        form='form1'&gt;
  
      &lt;br&gt;
      &lt;br&gt;
  
      &lt;label&gt;Number of Stores:&lt;/label&gt;
  
                      &lt;br&gt;
                      &lt;br&gt;
  
                  &lt;div class='storeSpecifcs'&gt;
  
                 &lt;select id="numberOfStores"&gt;
                     &lt;option value="5"&gt;# of Stores&lt;/option&gt; 
                     &lt;option value="1"&gt;1&lt;/option&gt;
                      &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;/select&gt;
  
                      &lt;br&gt;
                      &lt;br&gt;
  
                  &lt;div class='storeSpecifcsContainer'&gt;&lt;/div&gt;
  
                  &lt;/div&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>jQuery: </p>
  
  <pre><code>$(document).ready(function () {
  
      $("#phone").intlTelInput({
          utilsScript: "lib/libphonenumber/build/utils.js"
      });
  
  $("#phone1").intlTelInput({
              utilsScript: "lib/libphonenumber/build/utils.js"
          });
  
  $("#phone2").intlTelInput({
              utilsScript: "lib/libphonenumber/build/utils.js"
          });
  
      $("#numberOfStores").change(function () {
          $('.storeSpecifcsContainer').empty();
          var number = $("#numberOfStores option:selected").text();
          var htmlToInsert = "";
          for (var i = 1; i &lt;= number; i++) {
              htmlToInsert = '&lt;input id="phone' + i + '" type="tel" form="form1"&gt;&lt;br&gt;&lt;br&gt;';
              $(".storeSpecifcsContainer").append(htmlToInsert);
  
  
          }
      });
  
  });
  </code></pre>