Delete respective input field in dynamic form (add and remove)

Question

I have implemented the this code from bootsnipp. I am able to add the fields as well as remove the button dynamically.

Html Part

<div class="form-group">
    <input type="hidden" name="count" value="1" />
    <label class="control-label col-md-2 col-sm-2 col-xs-12" for="image">Inclusion
    </label>
    <div class="col-md-5 col-sm-5 col-xs-12">
        <input type="hidden" name="icount" value="1" />
        <div id="i_field" class="form-group">
            <input class="form-control" id="ifield1" name="inclusion[]" type="text" style="width: 89%">
            <button id="b1" class="btn btn-info i_add_more" type="button">Add More</button>
        </div>
    </div>
</div>

JS Part

var inext = 1;
    $(".i_add_more").click(function(e){
        // e.preventDefault();
        var iaddto = "#ifield" + inext;
        var iaddRemove = "#ifield" + (inext);
        inext = inext + 1;
        var inewIn = '<input type="text" class="form-control" id="ifield' + inext + '" name="inclusion[]" style="width: 89%">';
        var inewInput = $(inewIn);
        var iremoveBtn = '<button id="iremove' + (inext - 1) + '" class="btn btn-danger i_remove_me pull-right" >-</button>';
        var iremoveButton = $(iremoveBtn);
        $(iaddto).after(inewInput);
        $(iaddRemove).after(iremoveButton);
        $("#i_field" + inext).attr('data-source',$(iaddto).attr('data-source'));
        $("#icount").val(inext);

        $('.i_remove_me').click(function(e){
            e.preventDefault();
            var ifieldNum = this.id.charAt(this.id.length-1);
            var ifieldID = "#ifield" + ifieldNum;
            $(this).remove();
            $(ifieldID).remove();
        });
    });

My Problem:

Suppose I add second input field, delete button appears next to the input field. When I click on the delete button, the first input field is deleted. But I actually want to delete the second field and respectively.

I have posted the code on this fiddle

Answer 1

You can use below code copy and replace you old code

var inext = 1;
$("body").on('click','.i_add_more',function(e){
    // e.preventDefault();
    console.log(inext);
    var iaddto = "#ifield" + inext;
    var iaddRemove = "#ifield" + (inext);
    inext = inext + 1;
    var inewIn = '<input type="text" class="form-control" id="ifield' + inext + '" name="inclusion[]" style="width: 89%">';
    var inewInput = $(inewIn);
    var iremoveBtn = '<button id="iremove' + (inext) + '" class="btn btn-danger i_remove_me pull-right" >-</button>';
    var iremoveButton = $(iremoveBtn);
    $(iaddto).after(inewInput);
    $(iaddRemove).after(iremoveButton);

    $("#icount").val(inext);

    $('body').on('click','.i_remove_me',function(e){
        e.preventDefault();
        var ifieldNum = this.id.charAt(this.id.length-1);
        var ifieldID = "#ifield" + ifieldNum;
        console.log(ifieldID);
        if(inext > 1 ) {
          inext =  inext - 1;
        }else {
          inext = 1;
        }

        console.log(this);
        $(this).remove();
        $(ifieldID).remove();
    });
});