How to control checkbox by radiobuttons dynamically when cloning
<p>I have this form where you can click a link to clone the form fields. I also have a selction if radio button at the top of each clone that hides and shows the checkbox with it. I am unable to figure out why I can do it on first iteration and how to make it work for each clone.</p>

<p>my html looks like this</p>

<blockquote>
  <p></p>

<pre><code>              &lt;tr&gt; // if the first radio button is selected, the checkbox appears and disappears on selecting 2nd
              &lt;td width="250px"&gt;&lt;span style="color: #cc0000;"&gt;*&lt;/span&gt; Please check the costs that apply:&lt;/td&gt;
              &lt;td&gt;&lt;input id="Cost_1" type="radio" value="15" name="Costs"/&gt; First Cost: $15 &lt;br/&gt;
              &lt;input id="Cost_2" type="radio" value="10" name="Costs"/&gt; Second cost: $10 &lt;br/&gt;
              &lt;tr id="special_offers"&gt;
                  &lt;td&gt;
              &lt;input  type="checkbox" value="5" name="special_offers"/&gt; &lt;span id="optional_span"&gt;Special Offers: $5
</code></pre>
  
  <p>
                                
                    </p>

<pre><code>          &lt;tr&gt;
            &lt;td&gt; First name:&lt;/td&gt;
            &lt;td&gt;&lt;input name="first_name_id_1" type="text" id="first_name_id_1" size="15" class="required"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt; Last name:&lt;/td&gt;
            &lt;td&gt;&lt;input name="last_name_id_1" type="text" id="last_name_id_1" size="15" &gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;

    &lt;/tbody&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;a href="#" onClick="addFormField(); return false;"&gt;Register additional attendee&lt;/a&gt;&lt;/td&gt;    
      &lt;/tr&gt;
      &lt;tr&gt;  
</code></pre>
  
  <p>And my functions:</p>

<pre><code> function addFormField() {

            var currentCount =  $('.multiplerows').length;
              var newCount = currentCount+1;
            var lastRepeatingGroup = $('.multiplerows:last')
            var newSection = lastRepeatingGroup.clone();
            newSection.find('input').val(''); //clears the text fields//
            $('input[type=radio]',newSection).removeAttr('checked');

            $('input[type=checkbox]',newSection).removeAttr('checked');
            newSection.insertAfter(lastRepeatingGroup);
            newSection.find("input").each(function (index, input) {
                input.id = input.id.replace("_" + currentCount, "_" + newCount);
                input.name = input.name.replace("_" + currentCount, "_" + newCount);
            });
            newSection.find("label").each(function (index, label) {
                var l = $(label);
                l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
            });
            return false;



        };

        $("input[name='Costs']").click(function() {
          if(document.getElementById('Cost_1').checked) {

            $("#special_offers").show();

          } else {

            $("#special_offers").hide();

           ;
          }
        });
</code></pre>
</blockquote>

<p>For some reason the fiddle ain't working, but I don't have problem cloning the elements on this form, my problem is to grey out the check box if user clicks second radio button on top and to have that option available, each time user clicks to register a new attendee.
Hopefully, the fiddle might give you some idea.
<a href="http://jsfiddle.net/qnAHq/7/" rel="nofollow">http://jsfiddle.net/qnAHq/7/</a></p>
