Modify a label FOR attribute
<p>I am using a jQuery function to clone a DIV that contains a set of input elements:      </p>

<pre><code>&lt;div class="history-form-fields"&gt;

&lt;div class="row"&gt;
  &lt;label for="History_0_type"&gt;Type&lt;/label&gt;
  &lt;select name="History[0][type]" id="History_0_type"&gt;
  &lt;option value=""&gt;Select&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;label for="History_0_name"&gt;Name&lt;/label&gt;
  &lt;input type="text" name="History[0][name]" id="History_0_name" /&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;label for="History_0_year"&gt;Year&lt;/label&gt;
  &lt;select name="History[0][year]" id="History_0_year"&gt;
  &lt;option value=""&gt;Select&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;input id="addAnother" type="button" value="Add Another" /&gt; 
</code></pre>

<p>When this DIV gets cloned the input elements NAME and ID tags need to be modified so that we can identify the data in the server side script.</p>

<p>I have the following code that clones the DIV and modifies the INPUT and SELECT tags:</p>

<pre><code>var counter = 0;

$('#addAnother').click(function(){
    var divCloned = $('.history-form-fields:first').clone();
    divCloned.insertAfter('.history-form-fields:last');
    initNewInputs(divCloned.children('.row'), ++counter);
});

function initNewInputs(divs, idNumber)
{       
    var inputs = divs.children('input, select').get(); // find all the INPUT and SELECT tags

    for(var i in inputs)
    {
        inputs[i].id = inputs[i].id.replace(/\d+/, idNumber);
        inputs[i].name = inputs[i].name.replace(/\d+/, idNumber);
    }
}
</code></pre>

<p>However I am having trouble modifying the LABEL FOR attributes. Anybody know how to do this?</p>
