JQuery clone and rename input fields

Question

I have the following:

                <!-- group clone //-->
                <div class="section">
                    <div class="parent row infoOn">
                        <div class="validGroup">
                            <a title="remove" class="iconClose" href="#">remove</a>
                            <div class="grouping">
                                <div class="clearfix valid">
                                    <label>Name<span class="iconReq">&nbsp;</span>:</label>
                                    <input type="password" class="text inpButton" name="items[0].first">
                                </div>
                                <div class="clearfix">
                                    <label>Email<span class="iconReq">&nbsp;</span>:</label>
                                    <input type="text" class="text inpButton" name="items[0].first">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row addControl">
                        <a href="#" class="button">Add</a>
                    </div>
                </div>
                <!-- group clone //-->

and jqery:

$(function(){
    // Control clone
    $('div.addControl a.button').click(function (e){
        e.preventDefault();
        var parent = $(this).closest('.section').find('.parent:last');
        var parentInput = parent.clone();
        parentInput.find("input").val("");
        parent.after(parentInput);

    });
    $('div.validGroup a.iconClose').live('click', function (e){
        e.preventDefault();
        if ($(this).closest('.section').find('.parent').length > 1){
            $(this).closest('div.parent').remove();

        }
    });
    reflesh();
});

• clicking the "Add" button removes the values ​​from the input fields and clone group (2 input fields).
• clicking the delete link deletes the group

Question: how can I change it so that when adding OR deleting a new group, the input fields would be renamed to name="items[INDEX].first"andname="items[INDEX].last"

For instance. when there is only one “group”, the input fields will have names:

• name="items[0].first"
• name="items[0].last"

if I add another one, the new one will have

• name="items[1].first"
• name="items[1].first"

etc. When I delete the first (one s items[0].first), the second input will be changed from "items[1].first"to items[0].first.

this is what i look like:

thank

Answer 1

I understood:

var size = parseInt($('.form .section .parent').size());
$('.form .section .parent').each(function(index){
    $(this).find('input.text').each(function(){
        $(this).attr("name", $(this).attr("name").replace($(this).attr("name").match(/\[[0-9]+\]/), "["+index+"]"));
    });
    if (size > 1) { $(this).find('a.iconClose').show(); }else{ $(this).find('a.iconClose').hide(); }
});

Answer 2

$('.add-more').on('click',function(){
var newelement= $(".form-content").eq(0).clone();
var num = $('.form-content').length;
var newNum = num + 1;
newelement.find('input').each(function(i){
   $(this).attr('name',$(this).attr('name')+newNum);
   $(this).attr('id',$(this).attr('id')+newNum); 
});
$('.form-content').last().after(newelement);
});