I have a registration page that has a multi-step form like below. In the first step the user inserts the registration info (his information, billing information, and information about each participant that the user is registering), then select the payment methods and then the third step is the payment.

I'm in doubt in the first step, then for the others should be equal.

In the "step 1" I have fields like buyer_name, buyer_surname, etc. I want in each step collect all information with jQuery so that is possible to send an ajax request to the server to validate the information when the "go to step 2" button is clicked. 

So I need to have a jQuery object or something with all data inserted by the user in the step to be possible to send it to the server.

My doubt is about how to properly store this data. For example in the step 1 Im getting the values like:

1. var buyer_name = $('#buyer_name').val();  // to get the value inserted by the user in the buyer_name input

But in this step 1, a user can do a registration with multiple participants, and in that case, in this step 1 the user also needs to insert the name and surname of each participant (like it is in the image), so it will exist inputs with the same name so I'm using [] in the name attribute. Do you know how to properly get this values in js?

Also for each participant, depending on the ticket type, a ticket type can have associated custom questions, for example in the image below the ticket type general has associated the custom question "phone". So I'm also in doubt how to store this information.

I have this example in the fiddle:  https://jsfiddle.net/3adebaL3/.