How to Differentiate Between Dynamically Generated Elements Having the Same Class

Just to explain the problem I’m trying to solve I’ll give a scenario as follows. Suppose I have a form that lets the user create a birthday card. On the form there is an input box for the name of the person who the card is created for. The second input box is for any saying the user wants to put on the card such as “happy birthday”. Then there is a third input box where the user can enter a color for the text that were entered into the first and second input boxes. Finally when the submit button is clicked a DIV is created dynamically. To this DIV the text from the first and second input boxes will be added and the color applied to the text.
The problem I have is that if I let the user create multiple cards for multiple people on the same page simply by entering text into the first and second input boxes, entering a color, and then clicking submit, the info for the current card will over write the info of the previous card if I’m not using IDs on the DIVs. Each of the input boxes is assigned a unique class. How do I differentiate one DIV from the next without assigning IDs to the DIVs? I can’t use event.target here because none of the Divs is being clicked.

It sounds to me that one solution is to “store” each preliminary submit in IndexedDB or similar before the final submit. Eventually letting the user view all previous submits before hitting the final submit…

I would use custom data eg.

element.dataset("cardnumber") = idx;

increment the idx variable as required
read it with

let x = element.dataset.cardnumber;

… why dont you assign IDs to the divs? Am confused. Is the express purpose of an ID; to uniquely IDentify an element…

The DIVs are dynamically generated, it would be a hassle to create code to generate a random string for the IDs. I just thought that there is an easier way to do it than that.

“card1”
“card2”

unique doesnt have to mean messy.

2 Likes

Assuming your form will submit data to your server, then form elements must have unique names. You do not need IDs or custom data. I assume you will have a button labelled something like “Add another card” for those wishing to have more than one card. Here is how it could work, including generation of form elements with unique names . . . .

I am not sure how you would then display previews of each card. However, you can use document.querySelectorAll() method to get a collection of ‘To’ elements, a collection of ‘Greeting’ elements and a collection of ‘Colour’ elements. You can then address the elements for each card by index number.

1 Like

Perhaps I misunderstand what you need to do but if I do then I think you should get the input from the form, store the data someplace, then generate the output from that data. I think that would be a more professional design; separating the data from the UI. If you do that then it might make future improvements easier too.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.