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>
