Duplicate radio button group in Javascript
<p>I am having a problem with some javascript code and was wondering if someone could help. i am working on the registration form, in particular a "Register someone else" part. I have the code working pretty good, except when i try to duplicate radio button groups in the javascript, it doesn't seem to want to change the group name attribute.</p>

<p>Here is the javascript:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){

    $('#add').click(function() {
    $('&lt;div class="container_add_registrant" &gt;
    &lt;p class="text_content"&gt;First name:&lt;br /&gt;&lt;input type="text" name="add_registrant[][fname]" id="add_registrant[][fname]" /&gt;&lt;/p&gt;
    &lt;p class="text_content"&gt;Last name:&lt;br /&gt;&lt;input type="text" name="add_registrant[][lname]" id="add_registrant[][lname]" /&gt;&lt;/p&gt;
    &lt;p class="text_content"&gt;Workout option: &lt;?php get_event_options_additional($event_id); ?&gt;&lt;/p&gt;

    &lt;p class="text_content"&gt;Shirt size:&lt;input type="radio" name="add_registrant[][shirtsize]" value="S" id="S" /&gt;S&amp;nbsp;&amp;nbsp;&lt;input type="radio" name="add_registrant[][shirtsize]" value="M" id="M" /&gt;M&amp;nbsp;&amp;nbsp;&lt;input type="radio" name="add_registrant[][shirtsize]" value="L" id="L" /&gt;L&amp;nbsp;&amp;nbsp;&lt;input type="radio" name="add_registrant[][shirtsize]" value="XL" id="XL" /&gt;XL&lt;/p&gt;

    &lt;p class="text_content"&gt;Is this person a cancer survivor?:&lt;input type="radio" name="add_registrant[][survivor]" value="Y" id="Y" /&gt;Yes &lt;input type="radio" name="add_registrant[][survivor]" value="N" id="N" /&gt;No &lt;/p&gt;&lt;/div&gt;')
    .fadeIn('slow').appendTo('.add_registrant');

    i++;
    });

    $('#remove').click(function() {
        if(i &gt; 0) {
            $('.container_add_registrant:last').remove();
            i--;
        }
    });

});

 &lt;/script&gt;
</code></pre>

<p>This part of the code seems to be the problem:</p>

<pre><code>&lt;p class="text_content"&gt;Shirt size:
   &lt;input type="radio" name="add_registrant[][shirtsize]" value="S" id="S" /&gt;S&amp;nbsp;&amp;nbsp;
   &lt;input type="radio" name="add_registrant[][shirtsize]" value="M" id="M" /&gt;M&amp;nbsp;&amp;nbsp;
   &lt;input type="radio" name="add_registrant[][shirtsize]" value="L" id="L" /&gt;L&amp;nbsp;&amp;nbsp;
   &lt;input type="radio" name="add_registrant[][shirtsize]" value="XL" id="XL" /&gt;XL
&lt;/p&gt;
</code></pre>

<p>Here is the fiddle url again (sorry, first time using this site)</p>

<p><a href="http://jsfiddle.net/4qaaN/1/" rel="nofollow">http://jsfiddle.net/4qaaN/1/</a></p>

<p>Click "register someone else" at least 2 times and you'll see the problem I'm getting with the radio buttons</p>
