Tabbing is not working in Datepicker

There is an input field accepting the date value and the date picker button is next to it which is created by jquery (because of javascript code i added, please refer the code in the end). If I click on the date picker button, the calendar opens but the cursor sets the focus on the input field instead of going inside the calendar, meaning on press of tab key the focus never goes inside the calendar i.e. i'm unable to navigate inside the calendar using tab key. This started happening since I upgraded jquery version to 3.3.1 and jquery-ui version to 1.12.1. Please see if you can help.

Tried to create it in jsfiddle but it only has jquery as options. Not able to see jquery-ui due to which the javascript core in description is not able to find .datepicker on dateOfBirth. Please suggest.