title: Counting form fields using js
body: <p>I have the form that looks like this:</p>
  
  <pre><code>&lt;form method="post" action=""&gt;
     &lt;label for="id_count-count"&gt;Count:&lt;/label&gt;
     &lt;input id="id_count-count" type="number" name="count-count"&gt;
     &lt;div class="extrafieldWrapper"&gt;&lt;/div&gt;
     &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Depending on number of field <code>count</code> i add or delete new couple of fields <code>item</code> and <code>item2</code>. For example: if value of field <code>count</code> will be 2, it will generate two couples of fields <code>item</code> and <code>item2</code>.</p>
  
  <p>There is this fields:</p>
  
  <pre><code>&lt;label for="id_items-0-item"&gt;Item:&lt;/label&gt;
  &lt;input id="id_items-0-item" type="number" name="items-0-item"&gt;
  &lt;label for="id_items-0-item2"&gt;Item2:&lt;/label&gt;
  &lt;input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="0"&gt;
  &lt;div class="extrafieldWrapperChAge"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then, depending on each value of field <code>item2</code> i add new fields that calls <code>childrenage</code>. There is how looks <code>childrenage</code> field:</p>
  
  <pre><code>&lt;label for="id_childrenage-0-childrenage"&gt;ChildrenAge 1&lt;/label&gt;
  &lt;input id="id_childrenage-0-childrenage" type="number" name="childrenage-0-childrenage" value="0"&gt;
  </code></pre>
  
  <p>Here is fiddle <a href="https://jsfiddle.net/79gt20q3/3/" rel="nofollow">link</a> .
  And here is imgur of what i want and what i've got <a href="http://imgur.com/Q27qcpD" rel="nofollow">link</a>.</p>
  
  <p>Depending of value of <code>item2</code> the id of <code>childrenage</code> is changing too. For example if i have '3' as value of <code>item2</code>, then i have <code>id_childrenage-0-childrenage</code>, <code>id_childrenage-1-childrenage</code> and <code>id_childrenage-2-childrenage</code>. And if i have several <code>item2</code> i have new examples of <code>childrenage</code> that count their id from the start for each <code>item2</code>:</p>
  
  <pre><code>&lt;label for="id_items-0-item2"&gt;Item2:&lt;/label&gt;
  &lt;input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="2"&gt;
  &lt;div class="extrafieldWrapperChAge"&gt;
     &lt;label for="id_childrenage-0-childrenage"&gt;ChildrenAge&lt;/label&gt;
     &lt;input id="id_childrenage-0-childrenage" type="number" name="childrenage-0-childrenage" value="0"&gt;
     &lt;label for="id_childrenage-1-childrenage"&gt;ChildrenAge&lt;/label&gt;
     &lt;input id="id_childrenage-1-childrenage" type="number" name="childrenage-1-childrenage" value="0"&gt;
  &lt;/div&gt;
  &lt;label for="id_items-0-item2"&gt;Item2:&lt;/label&gt;
  &lt;input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="1"&gt;
  &lt;div class="extrafieldWrapperChAge"&gt;
     &lt;label for="id_childrenage-0-childrenage"&gt;ChildrenAge&lt;/label&gt;
     &lt;input id="id_childrenage-0-childrenage" type="number" name="childrenage-0-childrenage" value="0"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In example above i have 2 fields <code>item2</code>, on one of it value '2' and on another value '1'. According to this i have two fields of <code>childrenage</code> for the first <code>item2</code> with id <code>id_childrenage-0-childrenage</code> and <code>id_childrenage-1-childrenage</code>, and one field <code>childrenage</code> for the second with id <code>id_childrenage-0-childrenage</code>. But i need that count of id <code>childrenage</code> go on from the first <code>item2</code> to the last, this is example:</p>
  
  <pre><code>&lt;label for="id_items-0-item2"&gt;Item2:&lt;/label&gt;
  &lt;input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="2"&gt;
  &lt;div class="extrafieldWrapperChAge"&gt;
     &lt;label for="id_childrenage-0-childrenage"&gt;ChildrenAge&lt;/label&gt;
     &lt;input id="id_childrenage-0-childrenage" type="number" name="childrenage-0-childrenage" value="0"&gt;
     &lt;label for="id_childrenage-1-childrenage"&gt;ChildrenAge&lt;/label&gt;
     &lt;input id="id_childrenage-1-childrenage" type="number" name="childrenage-1-childrenage" value="0"&gt;
  &lt;/div&gt;
  &lt;label for="id_items-0-item2"&gt;Item2:&lt;/label&gt;
  &lt;input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="1"&gt;
  &lt;div class="extrafieldWrapperChAge"&gt;
     &lt;label for="id_childrenage-2-childrenage"&gt;ChildrenAge&lt;/label&gt;
     &lt;input id="id_childrenage-2-childrenage" type="number" name="childrenage-2-childrenage" value="0"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is js code that realize this:</p>
  
  <pre><code>$(function(){
     $('#id_count-count').on('change', function(e){
        var n = $('#id_count-count').val() || 0;
        var html = "&lt;input id='id_items-TOTAL_FORMS' type='hidden' value='" + n + "' name='items-TOTAL_FORMS'&gt;"
           + "&lt;input id='id_items-INITIAL_FORMS' type='hidden' value='0' name='items-INITIAL_FORMS'&gt;"
           + "&lt;input id='id_items-MIN_NUM_FORMS' type='hidden' value='0' name='items-MIN_NUM_FORMS'&gt;"
           + "&lt;input id='id_items-MAX_NUM_FORMS' type='hidden' value='15' name='items-MAX_NUM_FORMS'&gt;";
  
        for (var i = 0; i &lt; n; i++) {
           html += "&lt;div&gt;Items" + (i + 1) + "&lt;/div&gt;"
              + "&lt;br/&gt;&lt;label for='id_items-" + i + "-item'&gt;Item:&lt;/label&gt;"
              + "&lt;input id='id_items-" + i + "-item' type='number' name='items-" + i + "-item'/&gt;"
              + "&lt;label for='id_items-" + i + "-item2'&gt;Item2:&lt;/label&gt;"
              + "&lt;input id='id_items-" + i + "-item2' type='number' value='0' name='items-" + i + "-item2' class='children_age'/&gt;"
              + "&lt;div class='extrafieldWrapperChAge'&gt;&lt;/div&gt;";
        }
        $(".extrafieldWrapper").html(html);
     });
     $(".extrafieldWrapper").on('change', '.children_age', function(e){
        var n = $(this).val() || 0;
        var html = "&lt;input id='id_childrenage-TOTAL_FORMS' type='hidden' value='" + n + "' name='childrenage-TOTAL_FORMS'&gt;"
           + "&lt;input id='id_childrenage-INITIAL_FORMS' type='hidden' value='0' name='childrenage-INITIAL_FORMS'&gt;"
           + "&lt;input id='id_childrenage-MIN_NUM_FORMS' type='hidden' value='0' name='childrenage-MIN_NUM_FORMS'&gt;"
           + "&lt;input id='id_childrenage-MAX_NUM_FORMS' type='hidden' value='15' name='childrenage-MAX_NUM_FORMS'&gt;"; 
  
        for (var i = 0; i &lt; n; i++) {
           html += "&lt;br/&gt;&lt;label for='id_childrenage-" + i + "-childrenage'&gt;ChildrenAge "+(i+1)+"&lt;/label&gt;"
              + "&lt;input id='id_childrenage-" + i + "-childrenage' type='number' value='0' name='childrenage-" + i + "-childrenage' /&gt;";
        }
        $(this).next('.extrafieldWrapperChAge').html(html);
     });
  
  });
  </code></pre>
  
  <p>Hope you you understand what i mean.
  I am newbie in java-script, can you help me to write the code in the right way. Thanks a lot!</p>