[jQuery] modifying parts of cloned inserted content
I have a div containing a form label and field. I'm building a feature
where the user can add as many of these fields as they need.
<div style="padding: 1px; clear: both;">
<label class="left" for="f_calibration_url[1]"><span>[+]</span>
Calibration URL:</label>
<textarea rows="2" cols="40" id="f_calibration_url[1]"
name="f_calibration_url[1]"/>
</div>
If the user clicks the [+] in the for label a clone of the field is
inserted into the form. I've got the cloning and inserting logic down
but what I end up with is this:
<div style="padding: 1px; clear: both;">
<label class="left" for="f_calibration_url[1]"> Calibration URL:</
label>
<textarea rows="2" cols="40" id="f_calibration_url[1]"
name="f_calibration_url[1]"/>
</div>
<div style="padding: 1px; clear: both;">
<label class="left" for="f_calibration_url[1]"><span>[+]</span>
Calibration URL:</label>
<textarea rows="2" cols="40" id="f_calibration_url[1]"
name="f_calibration_url[1]"/>
</div>
What I need to get is this. The only difference is that when clonded
the index of the label for and textarea name and id attributes needs
to increment by 1.
<div style="padding: 1px; clear: both;">
<label class="left" for="f_calibration_url[1]">Calibration URL:</
label>
<textarea rows="2" cols="40" id="f_calibration_url[1]"
name="f_calibration_url[1]"/>
</div>
Once I've cloned something is there a simple way to search and replace
mixed attribute values?
<div style="padding: 1px; clear: both;">
<label class="left" for="f_calibration_url[2]"><span>[+]</span>
Calibration URL:</label>
<textarea rows="2" cols="40" id="f_calibration_url[2]"
name="f_calibration_url[2]"/>
</div>