title: Use Javascript to create dynamic input id
body: <p>I want to use javascript to create <code>&lt;input/&gt;</code> tags with a dynamic <code>id</code> (<code>name</code> attribute will be the same) depending on the order in which they appear.</p>
  
  <p>I have the first <code>&lt;input/&gt;</code> tag in plain html and a div that should append a new <code>&lt;input/&gt;</code> with an incremented id when clicked:</p>
  
  <pre><code>&lt;input type="text" name="1" id="1" /&gt;
  &lt;div class="add_new" onClick="add_new_input()"&gt;+&lt;/div&gt;
  </code></pre>
  
  <p>Now, the javascript needs to count the amount of <code>&lt;input/&gt;</code>s currently being displayed (count) and use that amount to generate a dynamic <code>id</code> (count+1).</p>
  
  <p>Therefore if the <code>&lt;div class="add_new"&gt;&lt;..</code> is clicked twice, the output should be as follows:</p>
  
  <pre><code>&lt;input type="text" name="1" id="1" /&gt;
  &lt;input type="text" name="2" id="2" /&gt;
  &lt;input type="text" name="3" id="3" /&gt;
  </code></pre>
  
  <p>If I append the new <code>&lt;input/&gt;</code> tag in my form using jquery's <code>append()</code>, would this add to the previously appended <code>&lt;input/&gt;</code>s? Or would I need to append one <code>&lt;input/&gt;</code>, then two, then three, etc?</p>
  
  <p>Also, how can I use javascript to count the amount of <code>&lt;input/&gt;</code>s currently being displayed?</p>