Reuse same section with js multiple times on one page

Technical Q&A
1

Hey there,

for a client I have build an accordion section with the js code for that accordion in that section .liquid file.
No I have the problem that if the client wants to add this accordion section several times on one page that console is giving the error “redeclaration of let …”.
How can I prevent that the variables will be redeclared and that the customer can use this section multiple times on one page.

{{ ‘section-custom-faq-accordion.css’ | asset_url | stylesheet_tag }}

{{ section.settings.title }}

{% for block in section.blocks %}
{{ block.settings.accordion_title }}
{{ block.settings.accordion_paragraph }}
{% endfor %}

{% schema %}
{
“name”: “FAQ Accordion”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“default”: “FAQ”,
“label”: “Accordion Titel”
},
{
“type”: “checkbox”,
“id”: “margin-bottom”,
“default”: false,
“label”: “Große Margin unten?”
},
{
“type”: “checkbox”,
“id”: “first_accordion”,
“default”: false,
“label”: “Erstes Accordion?”
},
{
“type”:“text”,
“label”:“Accordion Position”,
“id”:“accordion_position”
}
],
“blocks” : [
{
“type”:“Accordion-Tab”,
“name”:“Accordion Tab”,
“settings”:[
{
“type”:“text”,
“label”:“Accordion Tab Titel”,
“id”:“accordion_title”
},
{
“type”:“richtext”,
“label”:“Accordion Tab Paragraph”,
“id”:“accordion_paragraph”
}
]
}
],
“presets”: [
{
“name”: “FAQ Accordion”
}
]
}
{% endschema %}