Daterangepickerはforeachループで動作していません

Question

WordPressサイトのこのjQueryコードです。その作品はうまくいっていますが、私はモーダルでfor-eachループを動かすと動作しません。私は他の答えを見ましたが、私は理解できません。

jQuery(document).ready(function(){ 
      jQuery(function() { 
       jQuery('#datepicker').daterangepicker({ 
        autoUpdateInput: false, 
        locale: { 
         cancelLabel: 'Cancel' 
        } 
       }); 
       jQuery('#datepicker').on('apply.daterangepicker', function(ev, picker) { 
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY')); 
       }); 
       jQuery('#datepicker').on('cancel.daterangepicker', function(ev, picker) { 
        jQuery(this).val(''); 
       }); 
      }); 

フォーム

<?php 
foreach ($query as $row) 
    { ?> 

      <form action=""> 
       <div class="form-group"> 
        <label>Check-in/Out</label> 
        <input type="text" class="form-control" id="datepicker" name="datefilter" placeholder="Check-in/Out"> 
       </div> 
      </form> 


     <?php 
    } 
?> 

Answer 1

代わりに要素のidを使用してdaterangepickerを呼び出す、あなたはすべてのdaterangepicker要素に共通のクラスを使用して、あなたが追加する必要がdaterangepicker