title: Can not reinitialize select2 inside any function
body: <p>I am trying add <code>select2</code> programmatically. here is the my code</p>
  
  <pre><code>$(document).on("click", "#btnAddRow", function(e) {
    var newText = $(".rawRow").html();
    var lastText = '&lt;div class="row productInfoRow" style="margin-top: 5px;"&gt;' + newText + '&lt;/div&gt;';
    $(".productInfoRow:last").after(lastText);
    $(".productList:last").focus();
  
    $(".productList").select2("destroy").select2();  
  });
  </code></pre>
  
  <p>But i am getting <code>Uncaught TypeError: $(...).selec2 is not a function</code> error.</p>
  
  <p>The first select which i have initialized outside function is working.</p>
  
  <pre><code>&lt;script&gt;
     $(".productList").select2();
  &lt;/script&gt;
  </code></pre>
  
  <p>But it's not working otherwise.</p>
  
  <p><a href="https://i.stack.imgur.com/HTlIs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HTlIs.png" alt="enter image description here"></a></p>
  
  <p>As you can see in the picture 1st one working. but second or third ones not working.</p>