Basecamp3 Jquery ui datepicker not opening

Question

function init() {
 $('.message-composition__footer')
 .prepend('<input type="text" id="datepicker_1" placeholder="Select date" class="input input--pilled event-form__date-input u-hide-focus" readonly>');
 let dp = $( "#datepicker_1" );
 console.log(dp);
 $(dp).datepicker({
 showOn: 'both',
 onSelect: function (dateText, inst) {
 schedule_date = dateText;
 $( dp ).val(dateText);
 console.log("schedule_date - " + schedule_date);
 }
 });
};
document.addEventListener('turbolinks:load', () => {
 console.log('turbolinks:load');
 init();
});
(function($) {
 console.log('new-message script loaded');
 init();
})(jQuery);

'turbolinks:load' event fires successfully but datepicker does not work. if I reload the page then it works. I'm stuck here for 2 days now, please help.

Datepicker after reloading page enter image description here

Datepicker without reloading page (when 'turbolinks:load' event fires) enter image description here

• Don't Panic: Why fire init() twice? Here's a working JSFiddle with a simplified version of your code, it runs fine.
• Ramandeep Bhagat: I'm trying to run init() on 'turbolinks:load' event, the input box #datepicker_1 gets prepended but the datepicker not working. Basecamp3 does not reload pages and therefore I have to rely on that particular event to fire my script.
• Don't Panic: I have no idea how reloading will give you a different result. I also have no idea what turbolinks is or how Basecamp3 is involved. The arrow function is an obviously unusual thing (which AFAIK does not work in IE11 and earlier), have you tried with a normal function instead?