# Create or delete a div on click in my form

**URL:** <https://community.weweb.io/t/create-or-delete-a-div-on-click-in-my-form/1979>\
**Category:** How do I?\
**Created:** [March 6, 2023, 5:56am UTC](https://community.weweb.io/t/create-or-delete-a-div-on-click-in-my-form/1979 "2023-03-06T05:56:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AdrienB](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@AdrienB](https://community.weweb.io/u/AdrienB)\
**Post date:** [March 6, 2023, 5:56am UTC](https://community.weweb.io/t/create-or-delete-a-div-on-click-in-my-form/1979/1 "2023-03-06T05:56:08Z")

</div>

Hi !  
I have a large profile form that allows you to add exceptional or regular constraints for the development of a schedule.  
I would like to:  
-generate a new row by clicking on “Add constraint”  
-delete the line and the corresponding variables by clicking on the trash can.  
The data will only be saved when the form is submitted  
How can I do that?

 ![FireShot Capture 108 - Vide - Commencer à partir de zéro_ - f1c0e85f-e5ce-4ffb-a84b-2bda69b60f18.weweb-preview.io](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e4633ed2be1b0b0b04bbf326b3dc82ef9a27be98.png)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [March 6, 2023, 10:23am UTC](https://community.weweb.io/t/create-or-delete-a-div-on-click-in-my-form/1979/2 "2023-03-06T10:23:58Z")

</div>

Hi,  
best approach is to create an Array variable which will hold your data, one item in the array will be one line of your form.  
You can create a container, and bind the repeat items to this variable.  
Then just make your template for each line. On each input on each line, bind the initial value to the data in the corresponding `context.item`, and add an `onChange` workflow which will update the array at the `context.item.index` position.  
On the Add button, push in your variable array a new item with some initial values.  
On the delete button, delete the `context.item.index` element on your array.

On your final workflow, you will be able to use the array variable

If some of these steps are not clear let me know, and i will go on a more detailed version  
You have a more detail explanation [here](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138)

---

<div class="post-metadata">

**Author:** ![AdrienB](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@AdrienB](https://community.weweb.io/u/AdrienB)\
**Post date:** [March 7, 2023, 6:43am UTC](https://community.weweb.io/t/create-or-delete-a-div-on-click-in-my-form/1979/3 "2023-03-07T06:43:12Z")

</div>

Thankyou very much for this explanation !

I’m already stuck on the second step… 😅 This is what I did :

I created the variable (not sure of the format at all):

 ![FireShot Capture 109 - Groupe sos - PAIRS - WeWeb - editor.weweb.io](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/181b0a353763d8af5d8ad0fa6aa120fd6c990632.png)

I created a container and copie pasted my line (div) into it.

I binded it with my variable:

 ![FireShot Capture 111 - Groupe sos - PAIRS - WeWeb - editor.weweb.io](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/ce6dfc4e36ea8c615a0bdd1d83bc01ebae7eada7.png)

I tried to bind the first input to the corresponding context.item

 ![FireShot Capture 112 - Groupe sos - PAIRS - WeWeb - editor.weweb.io](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/ab743c77e44743ac6c6f32f25bc24f466bdce18e.png)

I think I already make at least 5 misakes at this point but I can’t bind anything for the following inputs. I can’t choose an option for editing formula in the initial value field…

Please help !!

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [March 7, 2023, 8:08am UTC](https://community.weweb.io/t/create-or-delete-a-div-on-click-in-my-form/1979/4 "2023-03-07T08:08:09Z")

</div>

Have you tried copying the screenshots from [this post](https://community.weweb.io/t/are-form-variables-not-visible-while-the-form-is-in-a-collection-item/1138/6)?

---

<div class="post-metadata">

**Author:** ![AdrienB](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@AdrienB](https://community.weweb.io/u/AdrienB)\
**Post date:** [March 7, 2023, 11:06am UTC](https://community.weweb.io/t/create-or-delete-a-div-on-click-in-my-form/1979/5 "2023-03-07T11:06:24Z")

</div>

Yes I try to understand but no matter wich “element to repeat” item I bind, I’ve got an empty list and I can’t bind the input id…

Sorry for my english

@aurelie speak about an array variable. It coult be an objetct variable too?  
I need an array (list) of div (items) right?

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [March 7, 2023, 11:45am UTC](https://community.weweb.io/t/create-or-delete-a-div-on-click-in-my-form/1979/6 "2023-03-07T11:45:04Z")

</div>

You want a container, or a div, or columns in your page.  
Then you need to bind data in the `item` property of the element. The data to bind needs to be an array, it can be a collection or any other array. You can also add manually a sample array like this `[{id:1},{id:2},{id:3}]` just to experiment how it works. The array must have a property with a unique id.  
After that weweb will render a list of containers, drop an input inside one and it will automatically rendered in all of the containers.  
Then do exactly what you see in the screenshots of the mentioned post and you have the simplest example you can build.
