[jQuery] Clone div, it's child elements and increment name values.
Hi everybody,
this task is very complicated to me, I hope to be as clear as possible
so apologize for confusion.
I've got this piece of code which is part of a form
<div id="OptionDetails">
<label for="option_number">N.</label><br />
<select name="option_number[0]">
<option value="">Select Number</option>
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
</select>
<label for="option_type">Option Type</label><br />
<select name="option_type[0]"><option value="">Select Type</option>
<option value="">Select One</option>
<option name="option1" value="1">Option 1</option>
<option name="option2" value="2">Option 2</option>
<option name="option3" value="3">Option 3</option>
</select>
</div>
I have to post this form to a php script in order to insert the values
into a mysql database. The user has a button to duplicate this div and
obtain a new one to specify more combinations. The problem is to clone
and increment the "array" like this
<div id="OptionDetails">
<label for="option_number">N.</label><br />
<select name="option_number[1]">
<option value="">Select Number</option>
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
</select>
<label for="option_type">Option Type</label><br />
<select name="option_type[1]">
<option value="">Select Type</option>
<option name="option1" value="1">Option 1</option>
<option name="option2" value="2">Option 2</option>
<option name="option3" value="3">Option 3</option>
</select>
</div>
where the two select option_number[0] and option_type[0] become
option_number[1] and option_type[1] and can be passed as unique
fields.
I've tried with jquery clone but I get identical divs with identical
select names, so only the very first one is passed to the script and
inserted in the db.
Hope somebody can give a hand.
Thanks.