Hi @mikeyjk,
I don't know the thinking of the app Dev's. I can only speculate.
If you take a look at http://getbootstrap.com/javascript/#collapse-example-accordion, you'll see that the example has an ID of accordion. So the example only assumes a single accordion.
I think the app Dev's considered the possibility of more then one accordion on the same page so they decided to use accordion-1. Probably makes it programmably easier to work with when including a -x(number).
From the website they link to specific worded ID's for the collapse links and objects. The app Dev's decided to do something a little different, again easier programming probably in effect here too.
So in the app when you click to "ADD ITEM" for a particular Accordion the programming can easily account for which accordion and how many items there are.
If you used the literal website method, if you clicked the "ADD ITEM", programming would probably have to find all accordions, how many collapses there are (because remember the website has unique link ID's) probably have to do some word matching in order to then add the next collapseX wording. When the app Dev's just look for what is the parent ID and how many items in it.
The only thing is, they might not have accounted for someone nesting Accordions.
If there is one thing I see them missing though, is the attribute aria-controls=""
So again, probably a programming decision for easier control of the component, accounted for more then one, but not nested.
That would be my assumption.
One thing to remember, the Bootstrap Studio App. Developers are not the Bootstrap Developers. So they are probably just using what the Bootstrap Developers Javascript is.
So it's hard to say why ".item-x" seems to be the key, it's just easier to correct in the code for the one accordion in the OP's issue.
Saj