I'm running into an issue here being a JS noob. I'm trying to dynamically generate a datatable (which is successful), but also append colvis buttons to an element on which the datatable exists. Here is what I have so far working:

$('.dataTableInitialize').DataTable({
    responsive: true,
    language: {
        emptyTable: "None Found"
    },
    dom: 'Blfrtip',
    buttons: [
        {extend: 'colvis', className: 'btn btn-success btn-sm', text: 'Columns'},
    ],
});

This properly works on all tables (even multiples) on a page. Step 1, success

Step 2 I need to have the buttons appended to an element that the table sits in, which I can do on a one off basis, but I need it to apply to any tables created by the above element:

$("#tableId_wrapper > .dt-buttons").appendTo("div.actions");

I'm just struggling to figure out how to get this to work. My structure looks like this for 99% of the time there is a datatable. For the times there is not, I want to hide the buttons completely.

<div class="item">
    <div class="header">
        <h3>Title</h3>
        <div class="toolbar">
            <div class="wrapper">
                <div class="actions">
                </div>
            </div>
        </div>
    </div>
    <div class="tableBody">
        <table id="tableId"
               class="responsive table table-striped table-hover table-bordered display nowrap">
            <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

I appreciate any pointers on this, obviously the columns differ for each table so it needs to know about that before appending but I'm kinda stumped. JS is new to me so always learning here!