How to handle multiple inputs of the same type in html form?

Question

Let's say I have a form in which you can describe a family:

<input type="text" name="mother">
<input type="text" name="father">
<input type="text" name="child">

But I want people to be able to add an infinite number of children to the form. So I can use Javascript to just keep adding new inputs for more kids, but I am wondering what should I name them. I just do child1, child2, child3and so on? And on the backend, am I just sorting through all the children?

And what if all children also need the "age" input field. I just continue to add fields, such as child1_age, child2_age, child3_age?

I suppose this will work, but I have the feeling that there is a more reasonable way. Does anyone know how best to deal with this? All tips are welcome!

Answer 1

HTML forms can use arrays as input names. For instance:

<input type="text" name="child[]">

Answer 2

Take a look at this discussion. Enter the attribute idand save the attribute name.

HTML input - name versus id