custom webform time and date elements id's

Question

Using webform, I have two "Date/time" elements with popup date and timepickers enabled. I have a jQuery script to calculate and display detailed time difference between the values (date and time) entered in the two elements fields and for that I use those elements' id's several times.

My question is: I like to have custom id's one for each date and time element's field. Drupal/Webform automatically assign long ids like e.g. #edit-leaving-time-time for the time filed and #edit-leaving-time-date for the date field. That's for the first Date/Time element. And likewise, there's #edit-returning-time-time for the time filed and #edit-returning-time-date for the second Date/Time element.

The option in "Element custom attributes (YAML)" (accessed from the webform element Advanced tab on editing) to add a new id affects the whole Date/Time element's both date and time while I need to have unique id for each (one for the date and another for the time) to use in my jQuery script.

I see on twig debugging that those elements are controlled by the file \web\core\themes\classy\templates\form\input.html.twig but when I opened it, I only found this line and so I couldn't make any sense to where to go from there.

<input{{ attributes }} />{{ children }}

Although everything is working fine now and my question is more about "cosmetic" thing than functionality, I still love to learn if there's any way to do it without having to write a custom module or so since I still have no experience in that.

Thanks so much for any insightful ideas you may have.