Using JQuery Datepicker (Elements With Duplicate IDs)

I am running into the below error when using the jquery-ui datepicker.

0x800a138f - JavaScript runtime error: Unable to set property 'currentDay' of undefined or null reference

I have read online that this is because of html tags with duplicate IDs. I am currently hiding/displaying the divs/inputs with the duplicate ID using the CSS property display:none depending on whether the user is looking at the site on a mobile device or not. It looks like the hidden input is still "visible" to jquery when I am selecting the inputs for the datepicker using the lines of code below.

$("#emp2startdate").datepicker();

$("#emp2enddate").datepicker();

How can I completely hide html tag IDs from jquery so I am not selecting duplicate IDs?

I was trying to avoid changing the IDs because I figured I was using them somewhere else in the code. After some digging around, I found that the IDs of each input were not used anywhere else, so I could change them without worry.