jquery - Dynamically change input names when appending to an existing div -

i have form in need add new inputs based on user interaction. when page loads, form looks this:

<li class="basic">     <h4 class="secondary-title" style="margin-top: 0px;">specifications</h4>     <span style="float: right; margin-top: -40px;"><a href="#" class="add_specification_group"><i class="fa fa-plus-circle"></i> add group</a></span> </li> <li id="specifications">     <div class="specification_group" style="margin-bottom: 20px;">         <div class="label">             specification group              </div>         <input name="specification_group_title1[]" type="text" class="short" placeholder="group title" value="">         <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> add field</a><br />                      <input name="specification_name1[]" type="text" class="short" placeholder="name">          <input name="specification_value1[]" type="text" class="short" placeholder="value">      </div> </li> 

i user can either click on "add group" link in order add new group, or on "add field" link add fields 1 of existing groups.

the html group or fields taken template.

<script type="text/template" id="specification_group_template">     <div class="specification_group" style="margin-bottom: 15px;">         <div class="label">             specification group              </div>         <input name="specification_group_title[]" type="text" class="short" placeholder="group title" value="">          <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> add field</a><br />                      <input name="specification_name[]" type="text" class="short" placeholder="name">          <input name="specification_value[]" type="text" class="short" placeholder="value">                                  </div>                         </script> <script type="text/template" id="specification_group_field_template">     <div class="specification_group">                                                 <input name="specification_name[]" type="text" class="short" placeholder="name">          <input name="specification_value[]" type="text" class="short" placeholder="value">                                  </div>                         </script> <script type="text/javascript">     (function($) {         $(function() {                                                                             var groupcount = 1;              $('.add_specification_group').on('click', function(e) {                  e.preventdefault();                 $('#specifications').append($('#specification_group_template').html());                 groupcount++;             });              $('#specifications').on('click', '.add_specification_group_field', function(e) {                  e.preventdefault();                 $(this).parents('div.specification_group').append($('#specification_group_field_template').html()).find('input:last');             });                                      });     })(jquery) </script> 

everything fine right now, modify code whenever add new group, input names should modified based on groupcount variable value.

so if user clicks "add group", appended html should be:

<div class="specification_group" style="margin-bottom: 20px;">     <div class="label">         specification group          </div>     <input name="specification_group_title2[]" type="text" class="short" placeholder="group title" value="">     <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> add field</a><br />                  <input name="specification_name2[]" type="text" class="short" placeholder="name">      <input name="specification_value2[]" type="text" class="short" placeholder="value">  </div> 

also, when user decides add new fields existing group, inputs should renamed , group index value should added.

just replace values before adding html:

$('.add_specification_group').on('click', function(e) {                          e.preventdefault();                        var html = $('#specification_group_template').html();                        html = html.replace('specification_name[]', 'specification_name' + groupcount + '[]');                        html = html.replace('specification_value[]', 'specification_value' + groupcount + '[]');                        $('#specifications').append(html);                         groupcount++;                     }); 

you can save group number in data attribute on group main div, add replace:

$('.add_specification_group').on('click', function(e) {                              e.preventdefault();                            var html = $('#specification_group_template').html();                            html = html.replace('specification_name[]', 'specification_name' + groupcount + '[]');                            html = html.replace('specification_value[]', 'specification_value' + groupcount + '[]');                            html = html.replace('div class="specification_group"', 'div data-group-no="' + groupcount + '" class="specification_group"');                            $('#specifications').append(html);                             groupcount++;                         }); 

then retrieve , replace when adding new fields:

$('#specifications').on('click', '.add_specification_group_field', function(e) {                  e.preventdefault();   var parent = $(this).parents('div.specification_group');   var groupno = parent.attr('data-group-no');   var html = $('#specification_group_field_template').html();   html = html.replace('specification_name[]', 'specification_name' + groupno + '[]');                            html = html.replace('specification_value[]', 'specification_value' + groupno + '[]');  parent.append(html).find('input:last');             });