Radio button array with cloned row
<p>I have a form where a row get's clowned if a user clicks "add row". My problem is with the radio buttons, the name of the radio group stays the same and I need to get them unique for each cloned row. This is how I have it at the moment.</p>

<pre><code> &lt;input type="radio" name="chronic_l_duration[]" value="Chronic" /&gt;
 &lt;input type="radio" name="chronic_l_duration[]" value="Limited duration" /&gt;
</code></pre>

<p>What I would like is something like this:</p>

<pre><code>&lt;input type="radio" name="chronic_l_duration[1]" value="Chronic" /&gt;
&lt;input type="radio" name="chronic_l_duration[1]" value="Limited duration" /&gt;
</code></pre>

<p>end when a other row gets added it goes to:</p>

<pre><code> &lt;input type="radio" name="chronic_l_duration[2]" value="Chronic" /&gt;
 &lt;input type="radio" name="chronic_l_duration[2]" value="Limited duration" /&gt;
</code></pre>

<p>Javascript I use to clone a row:</p>

<pre><code>  $(document).ready(function(){
    var clonedRow = $('.row').clone().html();
    var appendRow = '&lt;tr class = "row"&gt;' + clonedRow + '&lt;/tr&gt;';  

    $('#btnAddMore').click(function(){

    $('.employmentHistoryForm tr:last').after(appendRow);
    });


    $('.deleteThisRow').live('click',function(){
    var rowLength = $('.row').length;

    if(rowLength &gt; 1){
    deleteRow(this);
    }else{
    $('.employmentHistoryForm tr:last').after(appendRow);
    deleteRow(this);
    }
    });

    function deleteRow(currentNode){
    $(currentNode).parent().parent().remove();
    }
    });
</code></pre>

<p>So each time the row get's cloned the radio button has a unique value.</p>

<p>Is there maybe a way I can do this?</p>
