Proper handling/creating of bootstrap classes in pure javascript? (V5)

[MasterEvilAce]

Fairly new to bootstrap (and web dev in general) so my thoughts and implementation may not be completely accurate.

The standard way of implementing Collapse is to use data- tags (data-toggle="collapse" href="#collapseExample")
This seems to create a Collapse instance for me automatically (I am unsure if this happens on document load or when the element is clicked.)
I can create a botton that toggles the element over and over with no issue.

Now, I'm working with a lot of generated elements and a complex scenario where I need to handle this manually in javascript.
When an element is clicked I call
collapse = new bootstrap.Collapse()
I call collapse.show() and leave it at that.

However, the second time the element is clicked, it's creating a new bootstrap.Collapse(). Now there seems to be two instances on the same element. Things can start behaving badly at this point, especially when I go to implement a "show all/ hide all" feature. To get around this, when the click is triggered I then call bootstrap.Collapse.getInstance() and only if there's no existing instance do I then create a new one.
This works but creates a situation where I have to write two/three lines of code anytime I want to interact with a bootstrap.Collapse.

Ideally it seems like there should be a "getInstanceOrCreate" function to handle this for me, but given that it doesn't exist, I'm probably implementing this wrongly.
Should I ALWAYS be creating a new collapse, but disposing it at the end of every event? Are the instances supposed to be short or long-lived?

This behavior exists with bootstrap.Modal as well, except when you have two instances bound to the same element, hide() and show() stop working at all.
I couldn't seem to find a great example of this situation in the v5 documentation. The documentation seems to assume you're always using data- attributes to handle creating the class and only using javascript to handle the events from them.

Please advise,
Thanks!

[Johann-S]

Hi @MasterEvilAce,

You shouldn't try to create a new Collapse on each click, instead you should create them when the DOM is ready or when your component is rendered. Like that you won't have to deal with : "Should I create a Collapse ? Or should I get an existing one ?" because you'll know the collapse already exist