Help Center Form - Date Picker Set by Javascript

Hi! I have two custom fields on my Help Center form, both are date-picker fields. I am looking to auto-set the second field when the first field changes.

The two fields are similar to reservation fields, like a "check in" and "check out" date. When the "check in" date is selected, I would like the "check out" date to auto-set to the "check in" date, so its easier for the user to find their "check out" date. 

Ideally, it would be great to only do this when the "check out" date is null, and to set the "check out" to 1 day after the "check in" by default, but for now just matching the two fields would be a great start!

I was able to get the following code to work (just as a starting place):

document.addEventListener('DOMContentLoaded', function() {

$('#request_custom_fields_1').val("2022-02-01"); 
$('#request_custom_fields_2').val($('#request_custom_fields_1').val()); 

})

So I got the two fields talking to each other (when the first field is manually set by code rather than by user).  I need to now set it so it changes when the USER updates the first field. I tried some various online solutions about using the change event, but it didnt work.

 

Any ideas? Seems like a good ask for Ifra Saqlain if they are available :)