Multiple instances of jQuery DateTime Picker


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:

enter image description here

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?

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.