Changing tabs behavior impacting Datatables

Question

This is a bit continuation of: DataTable.js doesn't load properly when using TABS

Suggested code to my problem was like below. The idea is to load the table when Tab is clicked and it works great.

$(document).ready(function() {
  $('a').on('click', function() {
    if ($(this).attr('href')) == "#Test1" && !$.fn.dataTable.isDataTable("#DT-iuyx2s7b") && !$.fn.dataTable.isDataTable("#DT-2u8iw0gr")) {
        $("#DT-iuyx2s7b").DataTable(...);
        $("#DT-2u8iw0gr").DataTable(...);
    } else if ($(this).attr('href')) == "#Test2" && !$.fn.dataTable.isDataTable("#DT-vdk1ir62")) {
        $("#DT-vdk1ir62").DataTable(...);
    }
  });
});

I've since then changed how I work with tabs using solution from here: Hiding, unhiding content on tab changes

<div class="wrapper">
<nav class="tabs">
    <div class="selector"></div>
    <a href="javascript:void(0)" class="active" data-id="1"><i class="fas fa-burn"></i>Avengers</a>
    <a href="javascript:void(0)" data-id="2"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
    <a href="javascript:void(0)" data-id="3"><i class="fas fa-bolt"></i>Thor</a>
    <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</a>
</nav>
</div>

So my href is javascript:void(0) and instead I'm using data-id.

Was:

<script>                    
    $(document).ready(function () {
        $('a').on('click', function () {
            if ($(this).attr("href") == "#Tab-g4am0hvx" && !$.fn.dataTable.isDataTable("#DT-t37rnhwq")) {
                $('#DT-t37rnhwq').DataTable({
                    "dom": "Bfrtip",
                    "buttons": [
                        "copyHtml5",
                        "excelHtml5",
                        "csvHtml5",
                        "pdfHtml5"
                    ],
                    "colReorder": true,
                    "paging": true,
                    "pagingType": [
                        "full_numbers"
                    ],
                    "lengthMenu": [
                        [
                            15,
                            25,
                            50,
                            100
                        ],
                        -1,
                        [
                            15,
                            25,
                            50,
                            100
                        ],
                        "All"
                    ],
                    "ordering": true,
                    "info": true,
                    "procesing": true,
                    "responsive": {
                        "details": true
                    },
                    "select": true,
                    "searching": true,
                    "stateSave": true
                });
            };
        });
    });            
</script>

Is:

<script>                    
    $(document).ready(function () {
        $('a').on('click', function () {
            if ($(this).attr("data-id") == "Tab-plsvqbkg" && !$.fn.dataTable.isDataTable("#DT-ni5ua9gr")) {
                $('#DT-ni5ua9gr').DataTable({
                    "dom": "Bfrtip",
                    "buttons": [
                        "copyHtml5",
                        "excelHtml5",
                        "csvHtml5",
                        "pdfHtml5"
                    ],
                    "colReorder": true,
                    "paging": true,
                    "pagingType": [
                        "full_numbers"
                    ],
                    "lengthMenu": [
                        [
                            15,
                            25,
                            50,
                            100
                        ],
                        -1,
                        [
                            15,
                            25,
                            50,
                            100
                        ],
                        "All"
                    ],
                    "ordering": true,
                    "info": true,
                    "procesing": true,
                    "responsive": {
                        "details": true
                    },
                    "select": true,
                    "searching": true,
                    "stateSave": true
                });
            };
        });
    });            
</script>

Each table is the same. First page looks like this:

The second page looks like this:

After I change it to my "new code"

So it seems to work partially. But it's missing the blue plus sign from the first page.

Full source for the page is here: https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example10/Example10.html

Does anyone see where the problem is? maybe I'm missing something

EDIT.

I believe this is more related to table going out of bounds so the plus sign doesn't show up. It would seem my fix is actually working but for some reason on second tab table goes outside of visible area.