Headings keep changing ID

I have a series of accordion blocks followed by a button. When I click the button, I want all the blocks to open. I found this thread and adapted that solution like this:

<!-- wp:html -->
<button id="js-trigger" style="background-color:#2b782e;border:none;color:white;padding:15px 32px;text-align:center;">View expanded list</button>
<script>
const trigger = document.getElementById('js-trigger');
const title1 = document.getElementById('at-183523');
const title2 = document.getElementById('at-183524');
const title3 = document.getElementById('at-183525');
const title4 = document.getElementById('at-183526');
const title5 = document.getElementById('at-183527');
const title6 = document.getElementById('at-183528');

trigger.addEventListener('click', function(event) {
	title6.click();
	title5.click();
	title4.click();
	title3.click();
	title2.click();
	title1.click();
	
});
</script>
<!-- /wp:html -->

That code, as you can see, is just in a “custom HTML” block on the page.

It works fine when freshly set up, but the “title” IDs that I’m referring to (which I think are the IDs assigned to the heading/clickable part of each accordion block, e.g. at-183523) keep changing. So for example, I set them up as shown, and at some point the actual IDs (not my references to them) update from being 183523… 183528 to 183529…183534. In other words, they get assigned the next unused IDs. This breaks the functionality of the button. It makes sense to me that this might happen when I edit the accordion blocks themselves, and I could deal with that, but it seems to be happening other times to, perhaps when I just edit unrelated (non-accordion-block) content on the same page and save.

I’m afraid I know very little about javascript or html, so I’m sort of just patching together solutions here based on some programming experience a decade ago. Please advise with that in mind, and ask questions if I left out important info.

Thanks for any help you can offer!