在PHP中循环并合并Datetimepicker

Question

I'm using datetimepicker javascript for bootstrap. The instance works if there is only one input field or if it's the first of multiple. But if there are multiple fields, the others don't work.

The widget is created from a foreach loop in php so foreach record it gives a new section with title, expiration date and a datetimepicker field to create a new date. However, if I hit the calendar icon of the 2nd or 3rd datepicker item it just activates the popover calendar for the first one.

How can i properly incorporate this into the loop so that each field has it's own input for datetimepicker?

<?php foreach($v as $k=>$n): ?>
<!--Body of the Modal for expired displays-->
<br>
<h6><?php echo $n['Type'] ?></h6>
<h6>Date/Time Expiring: <?php echo $n["Expiration"] ?></h6>
<h6>Set New Expiration:</h6>
  <div class="form-group">
    <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
      <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
      <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
          <span class="fa fa-calendar"></span>
      </span>
    </div>
  </div>                 
<?php endforeach; ?>

<script type="text/javascript">
$(function () {
  $('#datetimepicker1').datetimepicker({
     icons: {
                  time: "fa fa-clock-o",
                  date: "fa fa-calendar",
                  up: "fa fa-arrow-up",
                  down: "fa fa-arrow-down"
              }
  });
});
</script>

UPDATE:

<div class="form-group">
              <div class=" datepicker input-group date"  data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target=".datepicker"/>
                <span class="input-group-addon" data-target=".datepicker" data-toggle="datetimepicker">
                    <span class="fa fa-calendar"></span>
                </span>
              </div>
            </div>
<script type="text/javascript">
$('.datepicker').each(function(){
  $(this).datetimepicker();
   icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            }
  });

</script>

Answer 1

You have several div's with the same ID. This is not correct.

<?php foreach($v as $k=>$n): ?>
<!--Body of the Modal for expired displays-->
<br>
<h6><?php echo $n['Type'] ?></h6>
<h6>Date/Time Expiring: <?php echo $n["Expiration"] ?></h6>
<h6>Set New Expiration:</h6>
  <div class="form-group">
    <div class="input-group date datetimepicker1" data-target-input="nearest">
      <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
      <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
          <span class="fa fa-calendar"></span>
      </span>
    </div>
  </div>                 
<?php endforeach; ?>

<script type="text/javascript">
$(function () {
  $('.datetimepicker1').datetimepicker({
     icons: {
                  time: "fa fa-clock-o",
                  date: "fa fa-calendar",
                  up: "fa fa-arrow-up",
                  down: "fa fa-arrow-down"
              }
  });
});
</script>