title: Select2 not working after doing a dom that uses select2
body: <p>I using multiple select2 by using a different class and id, but if using DOM one of select2 suddenly not working,,</p>
  <p>select2 can't do data transaction via ajax,,</p>
  <p><a href="https://i.stack.imgur.com/8aIVX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8aIVX.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $("#pelanggan").select2({
      minimumInputLength : 3,
      ajax : {
        url                : "&lt;?= $base_url; ?&gt;/api/api.php",
        type               : "POST",
        dataType           : "JSON",
        data: function (params) {
            return {
                proses    : "data_pelanggan",
                pelanggan : params.term
            };
        },
        processResults : function (response) {
            return {
                results : response
            };
        },
        cache : true
      }
    });
  });
  
  function add_transaksi() {
    var index = $("#total_detail").val();
    $("#total_detail").val(parseInt($("#total_detail").val())+1);
  
    var detail_transaksi = document.getElementById("detail_transaksi");
    var tr = document.createElement("tr");
    tr.setAttribute("id", "tr_"+index);
  
    // Kolom 1 Checkbox
    var td = document.createElement("td");
    td.setAttribute("align","center");
    td.innerHTML += "&lt;input type='checkbox' name='detail_"+index+"' onchange='hapus_produk("+index+")' checked&gt;";
    tr.appendChild(td);
  
    // Kolom 2 Select
    var td = document.createElement("td");
    td.innerHTML += "&lt;select name='produk_"+index+"' id='produk_"+index+"' class='form-control select2' onchange='cek_produk(this,"+index+")' style='width:100%;' x-moz-errormessage='Silakan pilih produk.' required&gt;&lt;?php $HP = $Mod_Tampil-&gt;tampil_all($db,'SELECT ID_PRODUK,NAMA_PRODUK FROM PRODUK WHERE md5(ID_TOKO)="'.$_SESSION['TOKO'].'" ORDER BY NAMA_PRODUK ASC'); ?&gt;&lt;option type hidden selected value=''&gt;- &lt;?= bahasa($_SESSION['BAHASA'],'Pilih'); ?&gt; -&lt;/option&gt;&lt;?php if (!empty($HP[0])) { foreach ($HP[1] as $DP) { ?&gt;&lt;option value='&lt;?= $DP[0]; ?&gt;'&gt;&lt;?= $DP[1]; ?&gt;&lt;/option&gt;&lt;?php } } ?&gt;&lt;/select&gt;";
    tr.appendChild(td);
  
    // Kolom 3 Input
    var td = document.createElement("td");
    td.innerHTML += "&lt;input type='hidden' name='beli_"+index+"' id='beli_"+index+"' class='form-control' style='text-align:right;' readonly required&gt; &lt;input type='text' name='jual_"+index+"' id='jual_"+index+"' class='form-control' style='text-align:right;' readonly required&gt;";
    tr.appendChild(td);
  
    // Kolom 4 Input
    var td = document.createElement("td");
    td.innerHTML += "&lt;input type='number' name='jumlah_"+index+"' id='jumlah_"+index+"' class='form-control' style='text-align:right;' oninput='cek_persediaan(this,"+index+")' required&gt;";
    tr.appendChild(td);
  
    // Kolom 5 Input
    var td = document.createElement("td");
    td.innerHTML += "&lt;input type='number' name='diskon_"+index+"' value='&lt;?= $diskon; ?&gt;' id='diskon_"+index+"' class='form-control' style='text-align:right;' oninput='perhitungan_sub("+index+")'&gt;";
    tr.appendChild(td);
  
    // Kolom 6 Input
    var td = document.createElement("td");
    td.innerHTML += "&lt;input type='text' name='sub_"+index+"' id='sub_"+index+"' class='form-control' style='text-align:right;' readonly&gt;";
    tr.appendChild(td);
  
    detail_transaksi.appendChild(tr);
  
    $('.select2').select2();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name="pelanggan" class="form-control" id="pelanggan" style="width:100%;" x-moz-errormessage="Silakan pilih pelanggan."&gt;
                &lt;option type hidden selected value=""&gt;- &lt;?= bahasa($_SESSION['BAHASA'],'Pilih')." ".bahasa($_SESSION['BAHASA'],'Pelanggan'); ?&gt; -&lt;/option&gt;
              &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>how do I make select2 still work even though I use a dom that has select2 too ?</p>
  <p>Please help for this problem, and thank you for support me :)</p>