title: Select2 not displayed when added dynamically for the first time
body: <p>I am working with Jquery and I have a use case to add some elements dynamically on a button click.</p>
  
  <p>While adding the 'select' dynamically, the select2 is not displayed when the add button is clicked for the first time, instead, a simple 'select' is displayed, and when we click on add button again, all the previous 'select' get formatted to select2.</p>
  
  <p>I needed that when we click the add button, the first generated selects should also get the select2.</p>
  
  <p>Following is the script:</p>
  
  <pre><code>var container = $(document.createElement('div')).css({
          padding: '5px', margin: '20px', width: '400px', border: '1px solid',
          borderTopColor: '#999', float: 'left', borderBottomColor: '#999',
          borderLeftColor: '#999', borderRightColor: '#999'
      });
  
  var iCnt = 0;
  function add()
  {
          if (iCnt &lt;= 19) {
  
              iCnt = iCnt + 1;
  
      $(container).append($("&lt;select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'&gt;")); 
  
      //Add Property Selector
  
      $(container).append("&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;");     
      $(container).append($("&lt;select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' &gt;&lt;option value='equalto'&gt;A&lt;/option&gt;&lt;option value='notequalto'&gt;B&lt;/option&gt;&lt;/select&gt;"));
  
      $(container).append("&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;");     
              // ADD TEXTBOX.
      $('select').select2({width : '20%'});
              $(container).append('&lt;input type=text class="input" id=tbtext' + iCnt + ' ' +
                          'placeholder="Value ' + iCnt + '" style="float : center;" /&gt;&lt;br&gt;&lt;br&gt;');
  
  
              // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
              if (iCnt == 1) {
  
                  var divSubmit = $(document.createElement('div'));
                  $(divSubmit).append('&lt;input type=button class="bt"' + 
                      'onclick="GetTextValue()"' + 
                          'id=btSubmit value=Submit /&gt;');
  
              }
  
              // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
              $('#main').after(container, divSubmit);
          }
          // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
          // (20 IS THE LIMIT WE HAVE SET)
          else {
              $(container).append('&lt;label&gt;Reached the limit&lt;/label&gt;'); 
              $('#btAdd').attr('class', 'bt-disable'); 
              $('#btAdd').attr('disabled', 'disabled');
          }
      }
  </code></pre>
  
  <p>Following is the link to js fiddle: </p>
  
  <p><a href="https://jsfiddle.net/hns0qk2b/43/" rel="nofollow">https://jsfiddle.net/hns0qk2b/43/</a>    </p>
  
  <p>Please advise.</p>