How to get a build a form with repeated elements well
===

The title really doesn't say it, as i'm having trouble summarizing the issue. So here goes the long explanation:

Let's say I'm adding multiple contacts' information, and I have these fields:

 - Name of the contact
 - Method of Contact (email, phone number, instant message)
   - If email: Show an email field (let's say this field exists)
   - If phone number: Show a phone number field
   - If instant message: Show a text field

So right off the bat, I'm going to be needing JavaScript to complete this on the page itself (to add add or deletion contact fields), which I'm ok with. However, since I can add multiple contacts (and as the software developer, I don't know how many contact the user wants to add, it could be 1, 10, or 100)

So my biggest problem is how am I going to structure the things like the names for each of the field. Should I throw everything into things like `names[]`, `contactmethods[]` and access things in order, or if there's a better solution.

In addition, if the server starts to verify these information, and finds some malformed info, I would like to be able to send the data that the client sent to the server back to the client, so they don't lose everything they've entered. How would I easily accomplish that?

Some background info:
Technologies currently in use (that's relevant):

 - Flask
 - jQuery
 - WTForms