Dynamically print input field and radio buttons on change
<p>Problem:
I would like to kindly ask for assistance how you can include input fields and radio buttons depending on a previous choice you make for radio buttons.</p>

<p>jQuery code:</p>

<pre><code>&lt;script src="./js/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function()
    {
        $("input[name='authors']").change(function()
        {
            if(this.checked) 
            {
                if(this.value == 1) 
                {
                    $("#choice-1").show();
                    $("#choice-2").hide();
                }
                else if (this.value == 2)
                {
                    $("#choice-2").show();
                    $("#choice-1").hide();
                }
            }
        }
    });
&lt;/script&gt;
</code></pre>

<p>HTML code:</p>

<pre><code>&lt;label class="radio"&gt;&lt;input type="radio" name="authors" id="authors" value="1"&gt;1 author&lt;/label&gt; 
&lt;label class="radio"&gt;&lt;input type="radio" name="authors" id="authors" value="2"&gt;2 authors&lt;/label&gt;

&lt;div id="choice-1" style="display: none;"&gt;

    &lt;label class="control-label"&gt;Gender:&lt;/label&gt;

    &lt;label class="radio"&gt;&lt;input type="radio" name="FirstGender" id="FirstGender" value="1"&gt;Man&lt;/label&gt;
    &lt;label class="radio"&gt;&lt;input type="radio" name="FirstGender" id="FirstGender" value="2"&gt;Woman&lt;/label&gt;

&lt;/div&gt;

&lt;div id="choice-2" style="display: none;"&gt;

    &lt;label class="control-label"&gt;Gender:&lt;/label&gt;
    &lt;label class="radio"&gt;&lt;input type="radio" name="FirstGender" id="FirstGender" value="1"&gt;Man&lt;/label&gt; 
    &lt;label class="radio"&gt;&lt;input type="radio" name="FirstGender" id="FirstGender" value="2"&gt;Woman&lt;/label&gt;

    &lt;label class="control-label"&gt;Gender:&lt;/label&gt;
    &lt;label class="radio"&gt;&lt;input type="radio" name="SecondGender" id="SecondGender" value="1"&gt;Man&lt;/label&gt; 
    &lt;label class="radio"&gt;&lt;input type="radio" name="SecondGender" id="SecondGender" value="2"&gt;Woman&lt;/label&gt;

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

<p>Desired function:
If I click on the radio button 1 Author, then 1 input textfield should be generated with a headline called "Author name" and 2 radio buttons (Man / Woman) with the headline "Gender". Similar approach goes to 2 author (see comments in the code).</p>

<p>Thanks in advance!</p>
