Problems with Bootstrap4 tabs on Laravel5.8

I am having a huge problem getting this to work. I was previously using Bootstrap3 without any issues, but since converting to Bootstrap4 I can't get this to work.

In short, I have a page that includes a set of tabs, and each tab is called dynamically. I'm sure the issue is jQuery/JS related. If you notice a js variable called 'new_policyholder', if it set to 1, this indicates an existing entry is already in the database, so the existing info is loaded, and the tab works correctly. However, if it set to 0 (indicating that it is a new entry), nothing is loaded, and I end up with blank tabs.

It is obviously faulty logic on my part, but I can't see where. I had to add the line $('[data-toggle="tab"]:first').click(); otherwise nothing at all will load. Code is shown below.

Thanks

    @extends('layouts.master')
    
    @section('header')
    <script>
    
    $().ready(function() {
    
        sessionStorage.setItem('new_policyholder', });
    
    $('#policyholdertab a[href="#policyholder"], #policyholdertab a[href="#relationships"], #policyholdertab a[href="#nonresidence"]').click(function (e) {
    
      
      if (sessionStorage.getItem('new_policyholder') == 1) {
        e.preventDefault();
        var self = $(this);
        var url = self.attr('data-url');
        var h = this.hash;
        var href = h.substring(1);
        $.get(url, function(data) {$('#'+href).html(data)});
      $(this).tab('show') }
    });
    
        $('[data-toggle="tab"]:first').click();
    
    });
    
    </script>
    @endsection
    @section('content')
    <p>&nbsp;</p>
    <div id="tabs">
    <ul class="nav nav-tabs" id="policyholdertab" role="tablist">
     <li class="nav-item"><a href="#policyholder" class="nav-link active" id="policyholder-tab" data-toggle="tab" data-url="/policyholder" aria-controls="policyholder" aria-selected="true">Policyholder Details</a></li>
     <li class="nav-item"><a href="#relationships" class="nav-link" id="relationships-tab" data-toggle="tab" data-url="/relationships" aria-controls="relationships" aria-selected="false">Relationships</a></li>
     <li class="nav-item"><a href="#nonresidence" class="nav-link" id="nonresidence-tab" data-toggle="tab" data-url="/nonresidence" aria-controls="nonresidence" aria-selected="false">Periods of non-residence</a></li>
     </ul>
    <div class="tab-content" id="policyholdertabcontent">
      <div class="tab-pane show active" id="policyholder" role="tabpanel"></div>
      <div class="tab-pane" id="relationships" role="tabpanel"></div>
      <div class="tab-pane" id="nonresidence" role="tabpanel"></div>
    </div>
    </div>    
@endsection

via Chebli Mohamed