title: Incrementing names of form elements javascript
body: <p>I have a bunch of form elements that can be continuously added with an "Add Field" button.
  Now I want to give these fields incremental names like</p>
  
  <p>input-name-xyz-1, input-name-xyz-2, ....</p>
  
  <p>input-name-abc-1, input-name-abc-2, .....</p>
  
  <p>foo-1, foo-2, foo-3, ....</p>
  
  <p>and so on.</p>
  
  <p>The "Add Field" button calls a function called addField() which manipulates the dom elements to replicate the nodes.</p>
  
  <p>I am having problem with creating the logic for incremental names. Can you guys help me??</p>
  
  <p>Here's the code that I'm working on (The form elements are laravel generated)</p>
  
  <pre><code>/*THE HTML*/
  &lt;section class="input"&gt;
          {{ Form::label('achievements', 'Achievements:') }}
          &lt;input class="count" name="achievements-count" type="hidden" value="1"&gt;
          &lt;p class="addedField input"&gt;
              {{ Form::input('input-name-xyz-1', $competition_games, Input::old('achievement-competition'), array('id' =&gt; 'achievement-competition')); }}
              {{ Form::select('input-name-abc-1', array('Year - Place'), Input::old('achievement-year'), array('id' =&gt; 'achievement-year')) }}
              {{ Form::select('foo-1',    array('Position', 'Gold' =&gt; 'Gold', 'Silver' =&gt; 'Silver', 'Bronze' =&gt; 'Bronze', 'Participant' =&gt; 'Participant'), Input::old('achievement-achieved'), array('id' =&gt; 'achievement-achieved')) }}
          &lt;/p&gt;
          &lt;a onclick="addField(this)"&gt;+&lt;/a&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>and the javascript</p>
  
  <pre><code>function addField(elem){
      var parent = elem.parentNode;
      var addName = parent.id;
      var count = ++(parent.getElementsByClassName("count")[0].value);
      var lastNode = parent.getElementsByClassName("addedField")[count-2];
      var clone = lastNode.cloneNode(true); 
      var nodes = clone.childNodes;
      for(i=0; i&lt;nodes.length-1; i++){
          nodes[i].value = "";
          nodes[i].name = //I need the logic right here//.
      }
      if(count == 2)
          clone.innerHTML += "&lt;a class='removeLink' onClick='removeField(this)'&gt;X&lt;/a&gt;";
      parent.insertBefore(clone,elem);
  }
  </code></pre>
  
  <p>-- Regards, Aayush Shrestha</p>