title: How do I add unique IDs to dynamically created input fields in Javascript?
body: <p>I am using javascript to create input fields dynamically with a limit of 10 allowed on my form.  What I need to do to ensure these fields are submitted to the correct place is give them the right ID.  My question is how do I do this?</p>
  
  <pre><code>$(document).ready(function () {
      var max_fields = 10; //maximum input boxes allowed
      var wrapper = $(".input_fields_wrap"); //Fields wrapper
      var add_button = $(".add_field_button"); //Add button ID
      var x = 1; //initlal text box count
  
      var num = new Number;
      var newNum = num + 1;        
  
      /*if (x = max_fields) {
          alert("You can't add anymore fields.")   
      }
      */
  
      $(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 class="clonedInput"&gt;&lt;input id="" type="text" name="mytext[]"/&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>It would be nice for each input box to have an ID like "data_item_1" , "data_item_2", "data_item_3" etc etc.  I'm not sure on how to do this though.</p>