Multiple instances of jQuery DateTime Picker
javascript, jquery, jquery-ui
Solution
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.
Problem
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?