How to create dynamic radio button using javascript
<p>Hi my task is to dynamically add fields to a form when I click on a link.</p>

<p>I was successfull for text field, as well as file type, but not when I try to do this for inputs of type radio button.</p>

<p>Suppose I have created two rows and in one row I select gender, e.g. male, and in second row I want to select female then it will disappear the value of radio button from the first row. So I want to select different radio button values for different multiple rows.</p>

<p>Here is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var counter = 0;
$(function(){
  $('p#add_field').click(function(){
    counter += 1;
    $('#container').append(
      '&lt;/br&gt;&lt;strong&gt;Item ' + counter + '&lt;/strong&gt;&lt;br /&gt;'
      + '&lt;input id="field_' + counter + '" name="item[]' + '" type="text" /&gt;' 
      +'&lt;strong&gt;quantity ' + counter + '&lt;/strong&gt;' 
      +'&lt;input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" /&gt;' 
      +'&lt;strong&gt;rate ' + counter + '&lt;/strong&gt;' 
      +'&lt;input id="rate' + counter + '" name="rate[]' + '" type="text" /&gt;' 
      +'&lt;strong&gt;Amount ' + counter + '&lt;/strong&gt;' 
      +'&lt;input id="field_' + counter + '" name="amount[]' + '" type="text" /&gt;' 
      +'&lt;strong&gt;img ' + counter + '&lt;/strong&gt;' 
      +'&lt;input id="field_' + counter + '" name="image[]' + '" type="file" /&gt;' 
      +'&lt;strong&gt;Gender ' + counter + '&lt;/strong&gt;' 
      +'&lt;input id="male_' + counter + '" name="gender[]' + '" type="radio" value="male"/&gt;Male' 
      +'&lt;input id="female_' + counter + '" name="gender[]' + '" type="radio" value="female"/&gt;female'   
    );
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="custom.js"&gt;&lt;/script&gt;

&lt;h1&gt;Add your Hobbies&lt;/h1&gt;
&lt;form method="post" action="save.php" enctype="multipart/form-data"&gt;
  &lt;div id="container"&gt;
    &lt;p id="add_field"&gt;&lt;a href="#"&gt;&lt;span&gt;Add Field&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;

  &lt;input type="submit" name="submit_val" value="Submit" /&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>Please let me know where I am wrong.</p>