title: How to create dynamic radio button using javascript
body: <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>