bootstrap 3: position absolute not work with form-control class

Question

I work With Bootstrap 3 and jQuery For Add input field.

HTML:

<div style="padding:30px;" class="form-group">
    <label for="files" class="col-lg-1 control-label">form</label>
    <div class="col-lg-9">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group input-group-md">    <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>

                    <div id="InputsWrapper">
                        <input id="docs" class="form-control" type="text" name="files[]" placeholder="">
                    </div>
                </div>
            </div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>

        </div>
    </div>
</div>

JS:

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        if (x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div style="position:relative;"><input class="form-control" type="text" name="mytext[]" id="field" value="Text ' + FieldCount + '"/><a href="#" class="removeclass" style="position:absolute;right:0px;">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x > 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

I add remove input field link ( a href="#" class="removeclass" style="position:absolute;right:0px;">&times;</a> ) with position:absolute . now when click in add new field bootstrap 3 not show remove link.

I found this problem: if we remove class="form-control" from( $(InputsWrapper).append ) text input remove link show and worked But when add class="form-control" remove link not show for each input field!!

how do fix this problem?

Problem:

Not Worked DEMO : http://jsfiddle.net/K7jQ7/4/

Worked Demo Without form-control : http://jsfiddle.net/K7jQ7/2/

Answer 1

here is js fiddle for you

http://jsfiddle.net/pragneshok/K7jQ7/1/

HTML CODE

<div style="padding:30px;" class="form-group">
    <label for="files" class="col-lg-1 control-label">form</label>
    <div class="col-lg-9">
        <div class="row">
            <div class="col-lg-6" id="cnt">
                <div class="input-group input-group-md">    <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>

                    <div id="InputsWrapper">
                        <input id="docs" onclick="openKCFinder(this)" class="form-control" type="text" name="files[]" placeholder="">
                    </div>
                </div>
            </div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>

        </div>
    </div>
</div>

jQuery code :

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#cnt"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        if (x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div class="input-group input-group-md">   <span class="input-group-addon"><a data-content="" data-original-title="123" data-placement="top" rel="popover" class="help-box"><i class="fa fa-file-text"></i></a></span><div id="InputsWrapper"><input type="text" placeholder="" name="files[]" class="form-control" onclick="openKCFinder(this)" id="docs"></div></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x > 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

UPDATED FIDDLE

http://jsfiddle.net/pragneshok/K7jQ7/3/

New updated fiddle

http://jsfiddle.net/pragneshok/K7jQ7/5/