# Scope JavaScript to a specific module instance

**URL:** <https://community.hubspot.com/t/scope-javascript-to-a-specific-module-instance/149017>\
**Category:** CMS Development\
**Tags:** javascript\
**Created:** [May 5, 2026, 11:49am UTC](https://community.hubspot.com/t/scope-javascript-to-a-specific-module-instance/149017 "2026-05-05T11:49:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Woodsy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/woodsy/32/63860_2.png) [@Woodsy](https://community.hubspot.com/u/Woodsy)\
**Post date:** [May 5, 2026, 11:49am UTC](https://community.hubspot.com/t/scope-javascript-to-a-specific-module-instance/149017/1 "2026-05-05T11:49:22Z")

</div>

Hi, HubSpot’s **HubL** templating language has a special tag {% scope\_css %}…{% end\_scope\_css %} to scope **CSS** to a specific module instance. Is there a **{% scope\_js %}** or **{% scope\_script %}** for JavaScript.  
I’m looking to make this code so that it specific to the module. So that if I use multiple versions of the module on the same page the JavaScript wont effect the other modules. Thanks

```lia-code-sample
function Tabs() {
 var bindAll = function() {
 var menuElements = document.querySelectorAll('[data-tab]');
 for(var i = 0; i < menuElements.length ; i++) {
 menuElements[i].addEventListener('click', change, false);
 }
 }

 var clear = function() {
 var menuElements = document.querySelectorAll('[data-tab]');
 for(var i = 0; i < menuElements.length ; i++) {
 menuElements[i].classList.remove('active');
 var id = menuElements[i].getAttribute('data-tab');
 document.getElementById(id).classList.remove('active');
 }
 }

 var change = function(e) {
 clear();
 e.target.classList.add('active');
 var id = e.currentTarget.getAttribute('data-tab');
 document.getElementById(id).classList.add('active');
 }

 bindAll();
}

var connectTabs = new Tabs();

```

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [May 5, 2026, 11:59am UTC](https://community.hubspot.com/t/scope-javascript-to-a-specific-module-instance/149017/2 "2026-05-05T11:59:12Z")

</div>

Use a {{ name }} tag in your html and your js. That’s effectively the same as scoping.

So something like

```lia-code-sample
<div id="{{ name }}">
<div data-tab="1"></div>
<div data-tan="2"></div>
</div>

 function Tabs(containerId) {
 var container = document.getElementById(containerId);

 var bindAll = function() {
 var menuElements = container.querySelectorAll('[data-tab]');

etc.

var connectTabs = new Tabs('{{ name }}');

```

You’ll may need to adjust the rest of your js accordingly but that’s the basis idea to scope it.  
{{ name }} outputs the unique identifier for the instance of the module.

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)