title: Adding dynamic form fields with JavaScript
body: <p>I have a form that is used to create a JSON array, see <a href="https://stackoverflow.com/questions/47477819/using-a-form-to-create-json/47477848#47477848">my previous question</a> for reference.</p>
  
  <p>In this form a user can add additional details to the fom by clicking a button and filling in said extra details.</p>
  
  <p>These would then be placed into an array in a similar fashion to the below:</p>
  
  <pre><code>&lt;input type="text" name="AdditionalCitizenship[0][CountryOfResidency]"&gt;
  &lt;input type="text" name="AdditionalCitizenship[0][TaxIdentificationNumber]"&gt;
  &lt;input type="text" name="AdditionalCitizenship[1][CountryOfResidency]"&gt;
  &lt;input type="text" name="AdditionalCitizenship[1][TaxIdentificationNumber]"&gt;
  </code></pre>
  
  <p>This would allow me to grab as many details as the user entered by incrementing the array index.</p>
  
  <p>I was handed this script to add extra form fields.</p>
  
  <pre><code> $(document).ready(function() {
  var max_fields      = 10; //maximum input boxes allowed
  var wrapper         = $(".input_fields_wrap_tel"); //Fields wrapper
  var add_button      = $(".add_field_button_tel"); //Add button ID
  
  var x = 1; //initlal text box count
  $(add_button).click(function(e){ //on add input button click
      e.preventDefault();
      if(x &lt; max_fields){ //max input box allowed
          x++; //text box increment
          $(wrapper).append('&lt;div&gt;&lt;div class="row"&gt;&lt;div class="form-group col-md-4"&gt;&lt;label for="AdditionalTelephoneType"&gt;Telephone Type&lt;/label&gt;&lt;input type="text" class="form-control" name="AdditionalTelephoneType[]" &gt;&lt;/div&gt;&lt;div class="form-group col-md-4"&gt;&lt;label for="AdditionalTelephoneDialingCode"&gt;Dialing Code&lt;/label&gt;&lt;input type="text" class="form-control" name="AdditionalTelephoneDialingCode[]"&gt;&lt;/div&gt;&lt;div class="form-group col-md-4"&gt;&lt;label for="AdditionalTelephoneNumber"&gt;Telephone Number&lt;/label&gt;&lt;input type="text" class="form-control" name="AdditionalTelephoneNumber[]" &gt;&lt;/div&gt;&lt;/div&gt;&lt;a href="#" class="remove_field"&gt;Remove&lt;/a&gt;&lt;/div&gt;'); //add input box
  
  
      }
  });
  
  $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
      e.preventDefault(); $(this).parent('div').remove(); x--;
  })
  }); 
  </code></pre>
  
  <p>I am trying to use as is but in this scenario, it is difficult to increment x within the created HTML as it seems to blow up the function.</p>
  
  <p>Could I create the HTML more iteratively like so:</p>
  
  <p>First, create the DIV structure as a wrapper like:</p>
  
  <p><code>var html = "&lt;div&gt;&lt;/div&gt;"</code> </p>
  
  <p>Then append an input to this variable called <code>input</code></p>
  
  <pre><code>var input = document.createElement("input");
  input.type = "text";
  input.name = "AdditionalTelephoneType[" + x"]";
  </code></pre>
  
  <p>... and then insert the whole HTML block by using wrapper.append with the variables I have created previously?</p>