I am working on modifying a WordPress template for a client, one of the inputs I'm working with has a class that shows a calendar. Whenever I call the the input on the console like so jQuery("#booking_from_date") it shows a jQuery object underneath it that says:

jQuery360045212629567534381: {events: {…}, hasDataAttrs: true, focus: false, handle: ƒ}
jQuery360045212629567534382: {singleDatePicker: false, autoApply: true, alwaysShowCalendars: true, autoUpdateInput: false, minDate: '05/22/2022', …}

the html of the input looks like this

<input type="text" id="booking_from_date" size="40" name="booking_from_date" class="form-control" placeholder="Check-In" value="" readonly="readonly">

it seems like these jQuery classes were added to the input via the id of the input is there a way I can transfer those objects to a input with a different id? my goal is to be able to view the calendar when someone clicks on a different input with a different ID. I already tried using another input with the same id but the calendar will not show up. It seems like the calendar will only render the first input rendered on the page with ID of "booking_from_date"