title: jquery - Add field dynamically not functioning fully
body: <p>based on tutorial from <a href="http://www.codexworld.com/add-remove-input-fields-dynamically-using-jquery/" rel="nofollow">here</a> ,I'm trying to make some fields which can dynamically be added by a button an removed by another button. It almost works fine except that another group of fields that supposed to be created dynamically as well is not adding anything.</p>
  
  <p>Here's what i did at <a href="http://codepen.io/anon/pen/NAmPAV" rel="nofollow">codepen</a>.</p>
  
  <pre><code>    &lt;div class="field_wrapper"&gt;    
              &lt;a href="javascript:void(0);" class="add_button" title="Add field"&gt;New Group&lt;/a&gt;  
      &lt;/div&gt;
  
      &lt;script&gt;
          $(document).ready(function(){
      var maxField = 10; //Input fields increment limitation
      var addButton = $('.add_button'); //Add button selector
      var wrapper = $('.field_wrapper'); //Input field wrapper
      var fieldHTML = '&lt;div&gt;&lt;a href="javascript:void(0);" class="remove_button" title="Remove field"&gt;X&lt;/a&gt;&lt;table id="add_on_table"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;label class="field"&gt;Group Name&lt;/label&gt;&lt;input type="text" name="product_addon_name[]"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" name="product_addon_required[]"&gt; Mark as Required&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;label class="field"&gt;Group Description &lt;/label&gt;&lt;textarea name="product_addon_description[]"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;Option Label&lt;/td&gt;&lt;td&gt;Option Price (RM) &lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody class="addonoption"&gt;&lt;tr&gt;&lt;td&gt;&lt;input type="text" name="product_addon_option_label[]"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="product_addon_option_price[]"&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="javascript:void(0);" class="remove_row" title="Remove field"&gt;X&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt;&lt;tfoot&gt;&lt;tr&gt;&lt;td&gt;&lt;input type="button" class="add_option" value="New Option"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;&lt;/table&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;'; //New input field html 
      var AddRow = $('.add_option'); //Add button selector
      var RowWrapper = $('.addonoption'); //Input field wrapper
      var rowHTML = '&lt;tr&gt; &lt;td&gt;&lt;input type="text" name="product_addon_option_label[]"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="product_addon_option_price[]"&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="javascript:void(0);" class="remove_row" title="Remove field"&gt;X&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';    
      var x = 1; //Initial field counter is 1   
      $(AddRow).click(function(){ //Once add button is clicked     
        $(RowWrapper).append(rowHTML); // Add field html           
      });
      $(addButton).click(function(){ //Once add button is clicked
          if(x &lt; maxField){ //Check maximum number of input fields
              x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
          }
      }); 
      $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
          e.preventDefault();
          $(this).parent('div').remove(); //Remove field html
          x--; //Decrement field counter
      });
      });&lt;/script&gt;
  </code></pre>
  
  <p>In reference to what I did in the linked codepen, the fields generated OK when pressed the 'New Group' link. However, the button 'New Option' does not create anything once clicked. You can see in the JS section i write some code to create field, but it's just not working. Any idea why? Btw, i'm quite noob at javascript/jquery, so, sorry if it's just a stupid mistake. Thanks in advance!</p>