Why JQuery Datepicker is malfunctioning?

Question

I have a page where I am adding textboxes using for loop. There is a table in which there will be 12 rows with 4 columns. In 2nd and 4th column, I have added datepicker which is showing up fine.

The problem is when I select a date from datepicker in 2nd column, the date gets set in 2nd column(correct) but when I select a date in 4th column, the date gets set in 2nd column(incorrect).

Here's is my code:

...

<table class="table table-striped">
    <tr>
        <th><center>Column1</center></th>
        <th><center>Column2</center></th>
        <th><center>Column3</center></th>
        <th><center>Column4</center></th>
    </tr>

    <?php

      for($i=0; $i<count($time_period); $i++) {

        $current_table = $table[$i];

        $result = $db->query("SHOW TABLES LIKE '$current_table'");

        if($result->rowCount() > 0) {
          //Table Exists!

        ?>
        <tr>
          <td><center><?php echo $time_period[$i]; ?></center></td>
          <td><input type="text" class="form-control datepicker" id="<?php echo $i; ?>" autocomplete="off" name="date_receipt[]" value=""></td>
          <td><input type="text" class="form-control" id="<?php echo $i; ?>" autocomplete="off" name="cheque_amount[]" value=""></td>
          <td><input type="text" class="form-control datepicker" id="<?php echo $i; ?>" autocomplete="off" name="date_deposit[]" value=""></td>
        </tr>
        <?php
      }
      }

      ?>

</table>

...

JQuery Code to Add Datepicker

<script>
  $(function(){
    $.datepicker.setDefaults(
      $.extend($.datepicker.regional[''])
    );
    $('.datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
  });
</script>

I don't know why this is happening. Any ideas?

Answer 1

I have had a similar issue. Try giving them unique IDs and then using the IDs to select them in jQuery.

Reasoning: My guess is that .datepicker returns an array of the nodes, so when it gets clicked, it puts the value into the class.val which will be the first child in the array.

Update in response:

They both have the same id:

id="<?php echo $i; ?>

Not working: http://jsfiddle.net/snlacks/k3hdzLre/3/ Working: http://jsfiddle.net/snlacks/k3hdzLre/4/

Because they both have the same ID, the browser is going to look through the class by ID (even though you didn't pass the ID), because this is faster. The browser assumes IDs are unique.