Datenrangierer funktioniert nicht in foreach-Schleife

Question

Das ist mein jQuery-Code in WordPress-Site. Es funktioniert gut, aber wenn ich in einem Modal laufe, funktioniert die for-each-Schleife nicht. Ich habe andere Antworten gesehen, aber ich kann es nicht verstehen.

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(''); 
       }); 
      }); 

Formular

<?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

Statt die daterangepicker der Aufruf-ID des Elements verwenden, können Sie eine gemeinsame Klasse für alle daterangepicker Elemente verwenden und die daterangepicker