# Avoid square brackets for HubL variables

**URL:** <https://community.hubspot.com/t/avoid-square-brackets-for-hubl-variables/36038>\
**Category:** CMS Development\
**Created:** [April 23, 2021, 7:03am UTC](https://community.hubspot.com/t/avoid-square-brackets-for-hubl-variables/36038 "2021-04-23T07:03:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deborah](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/deborah/32/103281_2.png) [@Deborah](https://community.hubspot.com/u/Deborah)\
**Post date:** [April 23, 2021, 7:03am UTC](https://community.hubspot.com/t/avoid-square-brackets-for-hubl-variables/36038/1 "2021-04-23T07:03:07Z")

</div>

Hi all,

I currently working on a custom module for landing page templates, which implementes window modal. So that I can click on a button, a pop-up window appears where I can see content. Then I can close it again and I still am on the same page - no navigation to an other page…

I put in the html/css/js code in the module and that works fine for 1 modal module in the template. But if I want to use multiple of these custom modal module in my landing page template, I face the issue that I need a dynamic id for the modal div and the button in order to show the right content and close the right div.

Therefore, my idea was to use a text HubL-variable, where the user (that creates the template) can put in a unique id (e.g. modal\_1, modal\_2 etc. or content specific modal\_productname etc.) for each of the multiple modules.

However, the problem is if I use this value of the HubL Variable for a javascript variable name, it does not work due to the fact that the HubL-Variable is shown with square brackets (e.g. “[modal\_1]” instead of just the value “modal\_1”.  
See screenshot:

 ![41438i616FAD69E6B9D298.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/7/0758808973c066acc49c3c8d485fdb3afb690b78.jpeg)  
code of Hubspot module  
 ![41437iE58DA2F746B06DF0.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/e/de01506173fbc06caa5f6a40230c8983051ec2d3.jpeg)  
square brackets in HTML

Is it possible to use the HubL-variable content without the square brackets? Or any other idea how to implement this use case?

Thanks.

Best regards,

Deborah

---

<div class="post-metadata">

**Author:** ![natsumimori](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/natsumimori/32/39807_2.png) [@natsumimori](https://community.hubspot.com/u/natsumimori)\
**Post date:** [April 26, 2021, 7:00am UTC](https://community.hubspot.com/t/avoid-square-brackets-for-hubl-variables/36038/2 "2021-04-26T07:00:14Z")

</div>

Hi @Deborah ,

Thank you for reaching out to the HubSpot Community:)

@LucBenayoun and @dbeau79 , would you mind sharing your advice for Deborah?

---

<div class="post-metadata">

**Author:** ![LucBenayoun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lucbenayoun/32/27465_2.png) [@LucBenayoun](https://community.hubspot.com/u/LucBenayoun)\
**Post date:** [April 26, 2021, 8:13am UTC](https://community.hubspot.com/t/avoid-square-brackets-for-hubl-variables/36038/3 "2021-04-26T08:13:02Z")

</div>

Hi everyone 🙂

Thank you for tagging me @natsumimori 😉

@Deborah, I think your issue is caused by a repeater. In fact, when you create a repeater it creates a table which stores everyone iteration of your values. In this case you just set one value so the output is a table with only one value.

I tested it on my own and the code is working 😉

Bonus: I think I created what you were looking for in a simple way so enjoy!

MODULE FIELDS:

- id\_modal : Text

- modal\_text : Rich text

HTML:

```lia-code-sample
<div class='modal-container-outer'>
 <div class='row-fluid'>
 <button href="#" data-id='container_{{ module.id_modal }}' onclick="openPopup(this)">Open Modal</button>
 </div>
 <div id="container_{{ module.id_modal }}" class='modal'>
 <div class='row-fluid'>
 <div class='modal-container-inner'>
 <button href="#" data-id="container_{{ module.id_modal }}" class="close-popup" onclick="closePopup(this)"><i>Close</i></button>
 <div class='content'>
 {{ module.modal_text }}
 </div>
 </div>
 </div>
 </div>

 <script>
 let openPopup = (element) => {
 let href = element.dataset.id, id = document.getElementById(href);
 id.classList.add("open");
 }, closePopup = (element) => {
 let href = element.dataset.id, id = document.getElementById(href);
 id.classList.remove("open");
 }
 </script>
</div>

```

CSS:

```lia-code-sample
html{font-size: 62.5%;}
body{font-size:1.4rem;line-height:1.6;}
.modal-container-outer{font-family:Helvetica, Arial, sans-serif; text-align:center;}
.modal-container-outer .row-fluid{max-width:100rem;margin-left:auto;margin-right:auto;}
.modal-container-outer button{padding:1.5rem 2rem;border:none;color:#ffffff;background-color:purple;border-radius:3px;font-weight:600;}
.modal-container-outer .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);padding:5rem;box-sizing:border-box;}
.modal-container-outer .modal.open{display:block;}
.modal-container-outer .modal .close-popup {color: transparent;user-select: none;padding: .5rem;width: 30px;height: 30px;position:absolute;top: 1rem;right: 1rem;}
.modal-container-outer .close-popup i {position: absolute;transform: translate(-50%,-50%) rotate(45deg);transform-origin: center center;width: 15px;height: 15px;top: 50%;left: 50%;}
.modal-container-outer .close-popup i:before, .modal-container-outer .close-popup i:after {content: '';width: 100%;height: 2px;background: #ffffff;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);transform-origin:center center;}
.modal-container-outer .close-popup i:after {transform: translate(-50%,-50%) rotate(90deg);}
.modal-container-outer .modal-container-inner {text-align:left;position:relative;padding: 3rem;background: #ffffff;box-sizing: border-box;box-shadow: 0 10px 10px 10px rgb(0 0 0 / 20%);border-radius: 5px;}

```

If you want to create a repeater just put the fields in a group, transform it into a repeater and replace all the “module” values by “item” in the html. Then just wrap the html code in a for loop as this example:

```lia-code-sample
{% for item in module.field_group %}
<--- HTML --->
{% endfor %}

```

Let me know! 🔥

Cheers,

Luc

---

<div class="post-metadata">

**Author:** ![natsumimori](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/natsumimori/32/39807_2.png) [@natsumimori](https://community.hubspot.com/u/natsumimori)\
**Post date:** [April 27, 2021, 1:35am UTC](https://community.hubspot.com/t/avoid-square-brackets-for-hubl-variables/36038/4 "2021-04-27T01:35:29Z")

</div>

Thank you so much @LucBenayoun !

Please check out the advice above @Deborah 😃

---

<div class="post-metadata">

**Author:** ![Deborah](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/deborah/32/103281_2.png) [@Deborah](https://community.hubspot.com/u/Deborah)\
**Post date:** [April 27, 2021, 12:02pm UTC](https://community.hubspot.com/t/avoid-square-brackets-for-hubl-variables/36038/5 "2021-04-27T12:02:10Z")

</div>

Hi @LucBenayoun,

thanks for your advice! It now works. And thank you @natsumimori for managing the communication. 😊

My problem was solved, if I create a new field without the repeater option. Then the suqare brackets disappeared. In the previous version the repeater option was some time ago activated, but then I deactived it,… but the square brackets didnt disappear. It had to be a newly created field.

I really appreciate your help!😊

Cheers,

Deborah