Bootstrap smooth card collapse on dynamic DOM

I’m trying to create a card collapse following this page here.
https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
I’m creating the elements dynamically. Two things I noticed was:
A: Dynamically added elements do not collapse/show on their own
B: They do not do smooth collapsing/showing

So in my case to get around problem A , I added a button click event to the button which added and removed the “show” “collapse” class for the card.

export const ToggleCard = ((dom) => {
    let collapsed = dom.lastChild;
    if(collapsed.classList.contains("show")){
        collapsed.classList.add("collapsed");
        collapsed.classList.remove("show");
    }else{
        collapsed.classList.add("show");
        collapsed.classList.remove("collapsed");
    }
});

This works but it’s not smooth toggling/collapsing like the demo on the page.
When I click, it just pops in and out. Is there any way to resolve this?