add remove input box using jQuery bootstrap

Question

I add remove input box using jQuery and bootstrap 3. I action when I have one input this worked and showed the add icon and show delete icon for each input+1. Now, in default dynamic form, I have two,three ... input box and need to show the delete icon for each input box. But I see delete icon when I click in add icon only. How can I fix this for show delete icon for each input box in default ?

JS:

$(document).ready(function () {

    var MaxInputsAudio = 8; //maximum input boxes allowed
    var InputsWrapper = $("#AudioWrapper input"); //Input boxes wrapper ID
    var AddButton = "#AddMoreAudio"; //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
    {
        e.preventDefault();
        InputsWrapper = $("#AudioWrapper input");
        x = InputsWrapper.length;
        console.log(x + '  ' + MaxInputsAudio);
        if (x < MaxInputsAudio) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).parents('#AudioWrapper').append('<div class="AudioRemove" style="position:relative;clear:both;"><div style="float: left; width: 100%;"><input id="audio" onclick="openKCFinder(this)" class="form-control" type="text" name="audio[]"/></div><div style="float: left; position: absolute; left: -31px;top:10px;"><a href="#" class="removeclassAudio icon-minus fa-2x alerts-color">delete</a></div></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclassAudio", function (e) { //user click on remove text
        console.log(x);
        if (x > 1) {
            $(this).parents('.AudioRemove').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

HTML :

<div class="form-group">
    <label for="audio" class="col-lg-1 control-label"></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="" data-content=""><i class=" icon-music"></i></a></span>

                    <div id="AudioWrapper">
                        <input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder="">
                            <input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder="">
                    </div>
                </div>
            </div><a style="float:right" href="#" id="AddMoreAudio" class=" icon-plus icon-2x margin-top-8">Add</a>

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

NOTE : I print input box in PHP code using each , foreach loops.

DEMO @ JSFIDDLE

Answer 1

You need to put the markup for the delete element in your original HTML code.

<div class="input-group input-group-md">
    <span class="input-group-addon">
        <a class="help-box" rel="popover" data-placement="top" data-original-title="" data-content="">
            <i class=" icon-music"></i>
        </a>
    </span>
    <div id="AudioWrapper">
        <?php foreach($audiofiles as $index->$audio) : ?>
            <input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder="">
            <?php if($index > 0) : ?>
            <div class="AudioRemove" style="position:relative;clear:both;">
                <div style="float: left; width: 100%;">
                    <input id="audio" onclick="openKCFinder(this)" class="form-control" type="text" name="audio[]"/>
                </div>
            </div>
            <?php endif; ?>
        <?php endforeach; ?>
    </div>
</div>
<a style="float:right" href="#" id="AddMoreAudio" class=" icon-plus icon-2x margin-top-8">Add</a>

Updated fiddle here