In a bootstrap 4 website, I have the tabs below:

<ul id="tabsJustified" class="nav nav-tabs">
    <li class="nav-item"><a href="#tab1" data-target="#tab1" data-toggle="tab" class="nav-link active">Personal details</a></li>
    <li class="nav-item"><a href="#tab2" data-target="#tab2" data-toggle="tab" class="nav-link">Medical conditions</a></li>
    <li class="nav-item"><a href="#tab3" data-target="#tab3" data-toggle="tab" class="nav-link">Medication</a></li>
    <li class="nav-item"><a href="#tab4" data-target="#tab4" data-toggle="tab" class="nav-link">Care needs</a></li>
    <li class="nav-item"><a href="#tab4" data-target="#tab5" data-toggle="tab" class="nav-link">Care environment</a></li>
    <li class="nav-item"><a href="#tab3" data-target="#tab6" data-toggle="tab" class="nav-link"><i class="fa fa-plus-circle mr-2"></i>Add a second client</a></li>
</ul>

What I want is, remember the last selected tab and when the page reloads, go to that tab.

With this code, it's only working with the 1st, 2nd and 6th tab.

$(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        localStorage.setItem('lastTab', $(this).attr('href'));
    });
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
        console.log(lastTab);
    }
});

When I click the 4th tab, after reload, the 5th tab will be active. The console.log row gives back the correct tab id or href, I checked that.