在动态输入中使用datepicker

Question

I do have a grid that has a column called Received Date. This column is a dynamic input field that is supposed to activate the datepicker script from jquery when the user clicks on it and so select a desired date.

I do have the this following PHP code that generates the dynamic id:

$sql="SELECT id, firstname, lastname FROM customers ORDER BY firstname";
$sql=$mysqli->query($sql);
while($row=mysqli_fetch_array($sql)){

    $id = $row['id'];
    $firstname = $row['firstname'];
    $lastname = $row['lastname'];

    $output .='<tr id='.$id.'>';
    $output .='<td>'.$firstname.'</td>';
    $output .='<td>'.$lastname.'</td>';
    $output .='<td><input type="text" name="received" id="received" value=""/></td>';
    $output .='</tr>';

}

echo $output;

Then I have my jquery script that calls datepicker for "received" object:

<script>
   $(function() {
      $( "#received" ).datepicker();
   });
</script>

It works good but just for the input in the first row of the grid. The others do not pop up the datepicker script.

Does anyone know any solution? Thanks in advance.

Answer 1

You have duplicated id in your html. (datepicker only apply to the first input with id received)

Change id="received" to class="received", and then use class selector will fix your problem.

$(function() {
    $(".received" ).datepicker();
});