why is button inside expanded content not showing correctly?

Question

I have switch bootstrap button inside the collapse content, when i click on button inputs - then the collapse content is expanded and inside is switch button for enable disable something. but this button is not correctly displayed. this is button in collapsecontent . . this is how the button is correctly displayed outside the content.

i have the same button code for inside and outside button code:

                            <input  type="checkbox"  disabled data-toggle="toggle" data-on="Locked" data-off="Unlocked" data-onstyle="success" data-offstyle="danger" data-size="xs">

i am using this bootstrap switch toogle button library: https://gitbrent.github.io/bootstrap4-toggle/

.collapse is not triggered when it is inside the onclick function.

    $(document).on('click', '#b-<?= $i ?>-<?= $ii ?>', function () {
    var target = '#input-d-<?= $i ?>-<?= $ii ?>';
    $(target).collapse('toggle');
});

• click on the button to collapse content to show. if i have just this line in the code then the button is correctly displayed but the collapse content is automaticcaly shown on load, which i dont want. $('#input-d--').collapse('toggle');