Insert jQuery Calender in a "Foreach" Statement Gridview

Question

This is my php coding for the gridview table which has multiple rows of date input

 foreach ($form_data['srms'] AS $srms) {
     echo '<tr>' . "\n";
     echo '<td><input type="text" id="datepicker" name="srms[date][]" value="'.$srms['date'].'"></td>' . "\n";
     echo '<td>';

This is my js Coding

<script>
    $(function() {
        $( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" }).val();
    });
</script>

The problem is, the datepicker only comes out on the first text input box when clicked. It does not appear on the following text input boxes.. How can i do this?

Answer 1

IDs must be unique. Use a class instead:

echo '<td><input type="text" class="datepicker" name="srms[date][]" value="'.$srms['date'].'"></td>' . "\n";

JS:

<script>
    $(function() {
        $( ".datepicker" ).datepicker({ dateFormat: "dd-mm-yy" }).val();
    });
</script>