How can I activate the date picker on input type=date when I tab through inputs using laravel & javascript?

Question

I am using Laravel 9 with Bootstrap 5

I have the following inputs:

And I want a datepicker to pop up when I press Tab to go through each input. Currently when I click on the date input the datepicker pops up but not when I tab through inputs.

Here is some of my HTML code:

                {{-- Name --}}
                <div class="input-group mb-4">
                    <input wire:model="addName" class="form-control border-0 fs-14" placeholder="Name" aria-label="Name" type="text" name="name" required autofocus>
                </div>
                {{-- Surname --}}
                <div class="input-group mb-4">
                    <input wire:model="addSurname" class="form-control border-0 fs-14" placeholder="Surname" aria-label="Surname" type="text" name="surname" required>
                </div>
                {{-- Date of Birth --}}
                <div class="input-group mb-4">
                    <input id="DOB" wire:model="dateOfBirth" class="form-control border-0 fs-14" placeholder="Date of Birth" aria-label="Date" aria-describedby="email-icon" type="text" max="9999-12-31" onfocus="(this.type='date')" onblur="(this.type='text')" name="date_of_birth" required>
                </div>
                {{-- Email --}}
                <div class="input-group mb-4">
                    <input wire:model="addEmail" class="form-control border-0 fs-14" placeholder="Email" aria-label="Email" type="email" name="email" required>
                </div>
                @if ($this->userExistsAlready === true)
                    <span class="ms-1 ps-2 mb-3 fs-13 fw-600 text-danger">Email already taken</span>
                @endif
                {{-- Instagram --}}
                <div class="input-group mb-4">
                    <input wire:model="addInstagram" class="form-control border-0 fs-14" placeholder="Instagram username" aria-label="Instagram" type="text" name="number" required>
                </div>

And here is the javascript that I tried:

<script>
    $('#DOB').on('keydown', function(evt) {
        if (evt.key === 'Tab' || evt.key === 'Enter') {
            $('#DOB').click();
         }
    });
</script>

But the click event doesn't do anything.

I also tried the following javascript:

<script>
    $('#DOB').on('keydown', function(evt) {
        if (evt.key === 'Tab' || evt.key === 'Enter') {
            $('#DOB').datepicker({
                startDate: "01/01/1900",
                endDate: "01/01/2100",
                format: "yyyy-mm-dd",
                autoclose: true,
                todayHighlight: true
            });
        //     $('#DOB').datepicker('show');
        //     console.log('Hit');
         }
    });
</script>

But it said that datepicker isn't a function.

I also tried the following javascript from Bootstrap 5:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#datetimepicker').datetimepicker();
        });
    </script> 

But it just adds an empty box on the second time around.

Am I overlooking something small?