Showing multiple datepicker on same page don't work

[avlyn92]

Hi, I am having issue where I'm using 2 to 3 datepicker (not dateRangePicker) on the same page of my angular app. Upon clicking on the first input, the datepicker showed up, but the 2nd input onwards are not showing any datepicker pop up when clicking on the input. But when I inspect on the DOM, correct number of datepicker were generated; example I have 3 datepicker on that page, there are total of 3 datepicker elements being rendered on the DOM when inspect.
And the odd part is, even thou there are 3 datepicker elements on the DOM, clicking on the first input will activate all 3 of the datepickers at same time as well (the .active class is present on every datepicker).

Can you let me know how to fix this.
Thanks!

[mymth]

I guess you might be doing something like this.

const inputs = document.querySelectorAll('input.date');
for (let i = 0; i < inputs.length; i++) {
  const input = inputs[0];  // <- look at the index
  new Datepicker(input);
}