Add/Remove elements using JavaScript (add/remove fields with numbered ids and names)

Question

I have a form with select elements, and I would like to add and remove by choice some of these elements. This is the html code (also have jsfiddle here http://jsfiddle.net/txhajy2w/):

<form id="Form" action="#" method="POST">
    <div id="FormContainer">
        <div class="Row" id="container_0">
            <a id="delete_link_0">
                <i class="glyphicon glyphicon-minus"></i>
            </a>
            <select class="type_name" name="type_name_0" id="type_name_0">
                <option value="">Select an Option</option>
                <optgroup label="All Options">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </optgroup>
            </select>
            <a id="new_link_0">
                <i class="glyphicon glyphicon-plus"></i>
            </a>
        </div>
    </div>
    <div>
        <input type="submit" name="submit" value="Submit">
    </div>
</form>

What I would need is:

• clicking on the plus sign would generate a new row (including a div, select and the plus/minus links). However I would need for the new row, new ids and names for the elements (using numbers, for example type_name_1, type_name_2 and so on, changing only the index number).
• clicking on the minus sign, would delete that specific line, and re-number all id's of the remaining elements.

Answer 1

Ok to add select element again with new ID and to delete the last added select element you can do as below:

DEMO

$('#new_link_0').on('click',function(){
    var select=$('.wrap').find('select:last').clone();
    var id=$(select).attr('id').split('_')[2];
    $(select).attr('id','type_name_'+parseInt(id+1));
    $(select).attr('name','type_name_'+parseInt(id+1));
    $(select).insertAfter('.wrap select:last');
});

$('#delete_link_0').on('click',function(){
    $('.wrap').find('select:last').remove();
});

UPDATE

To add a new Item everytime and reset the whole set of ids to proper count you can do as below but you need to follow the below html structure:

DEMO

HTML

<form id="Form" action="#" method="POST">
    <div id="FormContainer">            
        <div class="Row" id="container_0">
            <div class="wrap">
               <div class="element"> //wrap each cloning element inside a div
                   <a id="delete_link_0" href="#" class="minus">
                       <i class="glyphicon glyphicon-minus"></i>
                   </a>
                   <select class="type_name" name="type_name_0" id="type_name_0">
                        <option value="">Select an Option</option>
                        <optgroup label="All Options">
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                        </optgroup>
                    </select>
                    <a id="new_link_0" href="#"  class="plus">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </div>
            </div>
       </div>
    </div>
    <div>
        <input type="submit" name="submit" value="Submit"/>
    </div>
</form>

JS

$(document).on('click','.plus',function(){
    var element=$('.wrap').find('.element:last').clone();//clone last element always
    var id=parseInt($(element).find('select').attr('id').split('_')[2])+1;
    $(element).find('select').attr('id','type_name_'+id);
    $(element).find('.plus').attr('id','new_link_'+id);
    $(element).find('.minus').attr('id','delete_link_'+id);
    $(element).find('select').attr('name','type_name_'+id);
    $(element).insertAfter('.wrap .element:last'); //insert at the end once modification to the cloned elements has been done
});

$(document).on('click','.minus',function(){
    if($('.wrap .element').length===1) //check for the length if there is only one element then prevent it from deleting
    {
        alert('Cannot delete this! Atleast one item must be there');
        return false;
    }
    $(this).parents('.element').remove();
    $.each($('.element'),function(index,value){//find each .element and reset the `ids` of the controls inside it
        $(this).find('.minus').attr('id','delete_link_'+index);
        $(this).find('.plus').attr('id','new_link_'+index);
        $(this).find('select').attr('id','type_name_'+index).attr('name','type_name_'+index);
    });
});

Note: Resetting the ids might create problem in realtime if you have such operations carried out in you flow