Javascript InnerHTML Erases Data In Form Elements

Question

I have this form with a button that allows you to add fields to the form.

Answer 1

When you set the innerHTML property, the browser parses the HTML and creates a new DOM tree for it, then replaces the current DOM tree with the new one. This destroys any data that isn't in the HTML.

You need to append DOM elements using createElement and appendChild or using jQuery (easier).