Accessible way to add form elements dynamically (jQuery)

Question

Hi, I'm setting up a form in which multiple entries can potentially be made (via an Add more button) for one of the qestions. I'm trying to figure out the best way to make this accessible without javascript and also to allow the input fields to be shown dynamically each time the Add button is clicked. There are 3 pieces of data i need to collect for each entry, below is the basics of what the HTML will look like:

Type: <input name = "type[]" id = "type" />
Sub type: <input name = "subtype[]" id = "type" />
Number: <input name = "num[]" id = "type" />

I don't have a problem with the JS code required to create this content dynamically on each click of the Add button, but I am thinking that as it is reasonable to set a limit on the amount of rows a person could add (for this type of data, 10 entries would be the very maximum i would expect), I could just add ten empty fields to the HTML form. Then, my jQuery code would hide them on domready, then each time the Add button is clicked, it simply shows the next available empty field on the form (until it gets to the 10th, at which point the Add button is disabled).

Does this approach make any sense?

Answer 1

Yes, you've described the usual progressive-enhancement way of handling dynamic rows.

You can always compromise as well: put n spare rows on the page as you describe so that a non-JS user can only add n rows at a time, but use JS to clone/add new rows as necessary so that JS users can add as many as they like.

(If the user can come back and add more rows afterwards, and it's not likely a non-JS user will want to add many rows at once, you can just make n=1 for the simple version: an empty row which is removed from the document by script and cloned back into the document as needed.)