Cloning and renaming form elements with jQuery

Question

I am looking for an effective way to either clone/rename or re-create address fields to offer ability to submit multiple addresses on the same page. So with form example like th

Answer 1

It's much less verbose if you write it sanely :-) I would likely just use clone and append. However, you'll get duplicate names. This isn't a big deal if your back-end can correctly handle "address[].street", but it may not and in such a case you'd need to cleanup after the clone. Thus I'd recommend "hiding it in a tidy builder function".

function createAddress (index) {
  return jQuery(replace('\
    
\
      \
      \
      \
      \
    
\
    ', {i: index}))
}

Where replace is some tidy function which understands a simple interpolation mapping. I prefer to "keep markup in something that looks like markup".

Worrying about performance here is likely not warranted.