I have the following HTML:

...

<tr id="tableRow">

<input id="p_Date" name="p.Date" data-key="0" type="text" />

</tr>

<input id="p_Date" name="p.Date" data-key="1" type="text" />

...

As you see the date elements have the same id and name...

Now I run the following jQuery when the page is ready ($(document).ready) :

$("#tableRow #p_Data").each(function (index, item) {
                    $(item).datepicker({
                    dateFormat: "yy-mm-dd"
                });
            });

I tried also:

$("#tableRow #p_Data").datepicker(…)

The problem is that when I try to pick a date with the datepicker, for the second <input> the datepicker assignes the date selected to the first <input> !!!!!!

How can I have the right behavior with datepicker?

Thank you.

P.S. - I also tried:

            var n = $("#tableRow #p_Data").length;
            for (var i = 0; i < n; i++) {
                $("#tableRow #p_Data[data-key='" + i + "']").datepicker({
                    dateFormat: "yy-mm-dd"
                });
            }

I am using Microsoft Edge,..