The bootstrap modal does not show on the first time after calling php file by using Ajax

Question

I am trying to display a modal by using bootstrap framework. Before showing modal, I let my web application connect to php file to get some data. Once data is being delivered by the php, it supposes to display the modal but it does not work. But when I clicked on the second the modal is shown normally.

Why the modal is not showing on the first time I click? But it does show the second time I click.

This is how I called php file

function btnClick(id) {
  jQuery.ajax({
    type: 'GET',
    url: 'helpers/helper_functions.php',
    data: {action: 'test'},
    dataType: 'json',
    success: function(output) {
        if (output['data'] != null) {
            const session = output['data'];
            $('$entryModal').modal('show');
            showModal(id, session)
        } else {
            if (output['error'] != null) {
                console.log(output['error'])
            } else {
                console.log(output)
            }
        }
    },
  });
}

This is showModal function

function showModal(entry_id, session) {
$('body').on('show.bs.modal', '#entryModal', function () {
    $('#video_wrap').html(
        '<div id="some_id" style="width:640px;height:420px;">session</div>'
    );
    // 
})
$('#entryModal').on('shown.bs.modal', function () {
    console.log('the modal is shown')
});
$('#entryModal').on('hidden.bs.modal', function () {
    //
});
}

This is the html file

<button id="watch_btn" type="button" class="smallBtn" data-toggle="modal"
                                        data-target="#entryModal"  onclick="btnClick('<{ $data }>')">
                                    <{ $data }>
                                </button>
                                <!-- Modal -->
                                <div class="modal fade" id="entryModal" tabindex="-1" role="dialog"
                                     aria-labelledby="entryModalDialog" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" style="max-width: fit-content;"
                                         role="document">
                                        <div class="modal-content" style="width: 640px;" >
                                            <div id="video_wrap"></div>
                                        </div>
                                    </div>
                                </div>