Multiple instances of jQuery DateTime Picker

Question

This is how I define my datetime picker

$('.datetimepicker').datetimepicker({
    dateFormat: 'y-m-d',
    timeFormat: 'h:m:s'
});

HTML:

<div class="branch">
    <h2>Branch 1</h2>
    <input id="from" class="datetimepicker" type="text" name="from"/>
    <input id="to" class="datetimepicker" type="text" name="to"/>
   </div>
   <div class="branch">
    <h2>Branch 2</h2>
    <input id="from" class="datetimepicker" type="text" name="from"/>
    <input id="to" class="datetimepicker" type="text" name="to"/>
   </div>

This works for the fields in branch 1. Have a look at the following picture:

The top two fields get their date correctly. But when I focus the bottom input field and set a date, not the bottom field is set but the top field. This is wrong, the bottom field should get the date.

I cannot access each input field by id because the input field is created dynamically and there are many of them. Any ideas what is wrong here?

Answer 1

You should not use the same id on an html element more than one time at the same page. Look at your <input id="from" ... and <input id="to" ...

<div class="branch">
    <h2>Branch 1</h2>
    <input id="from_1" class="datetimepicker" type="text" name="from"/>
    <input id="to_1" class="datetimepicker" type="text" name="to"/>
   </div>
   <div class="branch">
    <h2>Branch 2</h2>
    <input id="from_2" class="datetimepicker" type="text" name="from"/>
    <input id="to_2" class="datetimepicker" type="text" name="to"/>
   </div>

This should fix your datepicker issue.