Jquery New datepicker element destory

Hi!

The problem is you are initializing a new DatePicker on the same element every time you change its value. So I think that there are two ways to achieve your goal:

1. You can try to get the "Clear" button and trigger a click event every time your first input changes. So when you try to change the first input - the second one is clear.

2. If you want to do it in the way you are trying - you have to destroy the whole HTML element, append a new one and initialize DatePicker on it. The code for that should look like this:

   const pickerTemplate = `<div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker"><input placeholder="Select date" type="text" id="example" class="form-control"><label for="example">Try me...</label><i class="fas fa-calendar input-prefix" tabindex=0></i></div> `;
   

Then you have to destroy old one: $('old-one').remove()

And insert a new one using for example .append() method or innerHTML property: containerForPicker.innerHTML = pickerTemplate;

Now you can initialize a new one like you do.

Best regards