select2 eklentisi display:none ile çalışmıyor yardım

Merhaba elimde bir form var ve bu form 3 elementten oluşuyor. Tarih, ürün kodu, adet ve bunların yanında ekle butonu var, bu butona basınca bu formun aynısını alt satıra ekliyor yalnız ürün kodlarını select2 eklentisi ile seçtirdiğim için alt satırdaki formda çalışmıyor.
Görseller:
İlk form


Satır ekleye basınca ki form (YEŞİL YERE BAKIN LÜTFEN):



Kodlar:

 <div class="form-group">
 
<label>EKLE BUTONUNA BASARAK İSTEDİĞİNİZ KADAR VERİ EKLEYEBİLİRSİNİZ</label>
          <div class="form-group grup">  
           <div class="input-group">

  
                  
                     
                   
              
            <label>Tarih:</label>
                  <input type="date" class="form-control float-right" name="date[]" id="" value="<?php echo date('Y-m-d'); ?>">
                   
  
                  
               
           <label>Ürün Adı:</label> 
            <select  class="form-control float-right select2" type="text" name="isim[]">
                    <?php
 
if (file_exists("mamulrunler.xml")) {
    //Veri Çekiliyor
    $aceriklerXML = simplexml_load_file("mamulrunler.xml");
    
    //Veri Yazdırılıyor
    foreach ($aceriklerXML->country as $icerik)
{
   ECHO "<option>".$icerik."</option>";
    
}
    
} 
                    
          // <input type="text" name="isim[]" class="form-control" id="">
 ?>        </select>  
           <label>Paket Adeti:</label>
           <input type="text" name="aciklama[]" class="form-control" id="">
            
           <input type="text" name="mamulcevir[]" class="form-control" value="<?php echo $birlestir; ?>" hidden="hidden">
            
           <div class="input-group-addon"> 
            <a href="javascript:void(0)" class="btn btn-success ekle"> 
            <span class="glyphicon glyphicon-plus"></span>
            Satır Ekle</a>
           </div>
           </div>
          </div>
           <input type="submit" class="btn btn-primary" value="Gonder" name="submit">
</form> 
  
     
       <br>
          <div class="form-group copy" style="display:none"  >  
           <div class="input-group"> 
             
             <label>Tarih:</label>
                  <input type="date" class="form-control float-right" name="date[]" id="" value="<?php echo date('Y-m-d'); ?>">
           
            <label>Ürün Adı:</label> 
           <input type="text" name="isim[]" class="form-control" id=""> 
            
             <label>Paket Adeti:</label>
           <input type="text" name="aciklama[]" class="form-control" id="">
           
            <input type="text" name="mamulcevir[]" class="form-control" value="<?php echo $birlestir; ?>" hidden="hidden">
            
            <label>Ürün Adı:</label> 
            <select class="modal hide fade s" type="text" name="isias[]" tabindex="-1">
                    <?php
 
if (file_exists("mamulrunler.xml")) {
    //Veri Çekiliyor
    $aceriklerXML = simplexml_load_file("mamulrunler.xml");
    
    //Veri Yazdırılıyor
    foreach ($aceriklerXML->country as $icerik)
{
   ECHO "<option>".$icerik."</option>";
    
}
    
} 
                    
          // <input type="text" name="isim[]" class="form-control" id="">
 ?>        </select>  
            <div class="input-group-addon"> 
            <a href="javascript:void(0)" class="btn btn-danger sil"> 
            <span class="glyphicon glyphicon-remove"></span>
           Satır Sil</a>
           </div>
           </div>
          </div>

<br>

display none ile çalışmıyor veya jquery ile çalışmıyor. Alttaki de satır ekleme kodum:

<script> 
    
           $(function() {
           
               var max = 100;
               
               $(".ekle").click(function() {
               
                     if($("body").find(".alan").length < max){
                       
                         var alan = '<div class="form-group alan">'+$(".copy").html()+'</div>';
                     
                         $("body").find(".grup:last").after(alan);
                         
                     }else {
                     
                         alert("10 taneden fazla input giremessiniz..");
                     
                     } 
                   
               });
           
               $("body").on("click",".sil",function() {
               
                   $(this).parents(".alan").remove();
               
               })
               
           });
    
      </script>

2 gündür uğraşıyorum çözemedim başına daha önce gelen varsa yardımcı olabilirse sevinirim. Ana formu çoğaltınca alttaki formda select2 eklentisi çalışmıyor.

select2 methodu bir seçici üzerinde tetikleniyor. DOM'a yeni bir veri eklendiğinde doğal olarak select2'nin tekrar initialize edilmesi lazım ki sayfadaki tüm seçicileri çevirsin.

Kod Örneği:

 $(".ekle").click(function() {
                
                     if($("body").find(".alan").length < max){
                        
                         var alan = '<div class="form-group alan">'+$(".copy").html()+'</div>';
                      
                         $("body").find(".grup:last").after(alan);

                          // Initialize
                          $('.select2').select2();
                     }else {
                      
                         alert("10 taneden fazla input giremessiniz..");
                      
                     }
                    
               });

Selamlar. Üstü kırmızı ile çizdiğiniz kısmı istemiyorsunuz anladığım kadarıyla. Attığınız koda istinaden 53 den sonrasını aşağıdaki gibi değiştirir misiniz?

 <br>
          <div class="form-group copy" style="display:none"  >  
           <div class="input-group">
              
             <label>Tarih:</label>
                  <input type="date" class="form-control float-right" name="date[]" id="" value="<?php echo date('Y-m-d'); ?>">
            
            <!--
            <label>Ürün Adı:</label>
           <input type="text" name="isim[]" class="form-control" id="">
             -->

            <label>Ürün Adı:</label>
            <select class="modal hide fade s" type="text" name="isim[]" tabindex="-1">
<?php
  
if (file_exists("mamulrunler.xml")) {
    //Veri Çekiliyor
    $aceriklerXML = simplexml_load_file("mamulrunler.xml");
    
    //Veri Yazdırılıyor
    foreach ($aceriklerXML->country as $icerik)
{
   ECHO "<option>".$icerik."</option>";
    
}
    
}
                  
 ?>
</select>  
             <label>Paket Adeti:</label>
           <input type="text" name="aciklama[]" class="form-control" id="">
            
            <input type="text" name="mamulcevir[]" class="form-control" value="<?php echo $birlestir; ?>" hidden="hidden">

            <div class="input-group-addon">
            <a href="javascript<b></b>:void(0)" class="btn btn-danger sil">
            <span class="glyphicon glyphicon-remove"></span>
           Satır Sil</a>
           </div>
           </div>
          </div>
 
<br>

Teşekkür ederim cevabınız için ama böyle yapınca satır ekleye bastıktan sonra sadece 1 tanesi çalışıyor 2-3 satır ekleyince aynı hatayı alıyorum.
yok hayır benim dediğim bambaşka bir şey teşekkür ederim yanıt için.

@tematem in attığı kod işinizi gördüyse

// Initialize
 $('.select2').select2();

bu kodu click olayının dışında, üstünde bir yerde tanımlarsanız sorununuz çözülür.