\
**Category:** How do I?\
**Created:** [August 25, 2022, 5:58am UTC](https://community.weweb.io/t/how-to-dynamically-add-html-elements/1047 "2022-08-25T05:58:39Z")\
**Posts on this page:** 6\
**Page:** 1
**Author:**  [@tjmcdonough](https://community.weweb.io/u/tjmcdonough)\
**Post date:** [August 25, 2022, 5:58am UTC](https://community.weweb.io/t/how-to-dynamically-add-html-elements/1047/1 "2022-08-25T05:58:39Z")
Is it possible to inject HTML elements depending on a variable count? For example, if I have 1 employee, inject 1 email address field. If I have 10 employees then inject 10 email address fields?
---
**Author:**  [@tjmcdonough](https://community.weweb.io/u/tjmcdonough)\
**Post date:** [August 25, 2022, 6:07am UTC](https://community.weweb.io/t/how-to-dynamically-add-html-elements/1047/2 "2022-08-25T06:07:09Z")
I found the answer here [š§µ Collection List (weweb.io)](https://docs.weweb.io/collection-list/) š
---
**Author:**  [@tjmcdonough](https://community.weweb.io/u/tjmcdonough)\
**Post date:** [August 25, 2022, 7:29am UTC](https://community.weweb.io/t/how-to-dynamically-add-html-elements/1047/3 "2022-08-25T07:29:14Z")
Ok so this works for a collection but how can I inject HTML columns depending on a number entered by a user?
---
**Author:**  [@stagiaire](https://community.weweb.io/u/stagiaire)\
**Post date:** [September 2, 2022, 8:20am UTC](https://community.weweb.io/t/how-to-dynamically-add-html-elements/1047/4 "2022-09-02T08:20:02Z")
Hi,
I found a hacky way of doing it, might be what you need waiting for a weweb integrated option.
If you just need a define number of element that are all the same, you can use the collection list of the column component.
In the item field, bind the value to :
```auto
return new Array(variables['inputUid-value'])
```
variables[āinputUid-valueā] being the field where your user select a number.
In order to get every input of each collection item you first need to change the input elementās HTML attribut class to the ā **yourElementClass** ā you want. Once itās done, in a workflow (such as a submit button workflow) you will need a variable with the array type and edit its value (with a change variable value block) to :
```auto
return Array.from(
document.getElementsByClassName("yourElementClass"))
.map(e => e.value)
)
```
It become harder if you need to display specific data for every collumn or if you need to add individual submit button for every collection item you have
If your data are stored in a collection, you can change your item field to :
```auto
return collections['collectionUID'].data.slice(0,variables['inputUid-value'])
```
In order to have individual submit button, you need a way to identifie your collection itemās input. To do that, you will need to change the item field to :
```auto
return new Array(variables['inputUid-value']).fill().map((_, idx) => 0+ idx)
```
This will give you number to identifie every collection item you have.
Now that you have your collection and your input field in every item collection, you will be able to identifie each input by binding there HTML attributes id to :
```auto
return "identifier" + context.item.data
```
Now, in your buttonās workflow, you can get the input of the input that is in the same collection item :
```auto
document.getElementsByClassName("identifier"+context.item.data))
```
Hope this help you !
---
**Author:**  [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [September 2, 2022, 11:01am UTC](https://community.weweb.io/t/how-to-dynamically-add-html-elements/1047/5 "2022-09-02T11:01:33Z")
You can use two nested column elements.
Look at [this examole of a dynamic grid](https://community.weweb.io/t/dynamically-structured-data-grid-element/780/2).
In the example you can see also a sample of the data controlling the grid.
If you change the data you change the grid too, so adding a column is just modifying the underlying data.
---
**Author:**  [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [September 5, 2022, 8:11am UTC](https://community.weweb.io/t/how-to-dynamically-add-html-elements/1047/6 "2022-09-05T08:11:16Z")
+1 to @dorilama , its always better to not touch the DOM, and manipulate the data use to generate it. Itās avoid a lot of bugs due to conflict between Vue and what your script is doing