Dynamically add and remove form fields

Question

I would like to create a form field which has an icon in it, let's say a plus-sign. When this icon is clicked, a new identical form field appears, but with a minus-sign in it. And as you guessed, the minus-sign removes the form field again.

I would like to do this using Bootstrap (3.2.0) and jQuery.

What is the best way to do this? I would like to put a limit on the number of fields (let's say 3) and also not have duplicate id fields. Also, I would like the icon to be inside the input .

HTML file:

<div class='container'>
    <div class='row marketing'>
        <div class='col-lg-15'>
            <form class='form-horizontal'>        
                <div class="form-group has-feedback">
                    <label id="keywordLabel" for="keyword" class="col-sm-2 control-label">Keywords:</label>
                    <div id="keywordList" class="col-sm-10">
                        <input id="keyword" type="text" name="keyword" class="form-control"></input>
                        <span id="addKeyword" class="glyphicon glyphicon-plus form-control-feedback"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JavaScript file:

$(document).ready( function() {
    $('#addKeyword').on('click', function() {
        $('#keywordList').append(
          "<input id='keyword' class='form-control' type='text' name='keyword'><span id='removeKeyword' class='glyphicon glyphicon-minus form-control-feedback'></span>"
        );
    });
});

For my code in JSFiddle, click here .

Answer 1

Edit: I'm still messing around, if I remove the "form-control-feedback"-class in the javascript, it works better.

For now I have:

<div class='container'>
<div class='row marketing'>
    <div class='col-lg-15'>
        <form class='form-horizontal'>        
            <div class="form-group has-feedback">
                <label id="keywordLabel" for="keyword" class="col-sm-2 control-label">Keywords:</label>
                    <div id="keywordList" class="col-sm-10">
                        <div class="form-control">
                        <input id="keyword" type="text" name="keyword" class=""></input>
                            <span id="addKeyword"  aria-hidden="true" class="glyphicon glyphicon-plus form-control-feedback"></span></div>
                    </div>
            </div>
        </form>
    </div>
</div>

And JS:

$(document).ready(function () {
$('#addKeyword').on('click', function () {
    $('#keywordList').append("<div class='form-control'><input id='x' class='form-control' type='text' name='keyword'></input><span id='removeKeyword'  aria-hidden='true' class='glyphicon glyphicon-minus'></span></div>");
});

});

Still not perfect, but closer already.

Original text: First of all, your jsfiddle doesn't show the icon, because you didn't activate bootstrap on it. if I activate the bootstrap extension, I can see the "+" I'm not sure what you're asking us, as there is no real question in your post, but if I click the "+", it adds a field. The problem is that the "-" goes in front of the "+" and so you can't see it. You're also adding duplicate ID's by doing, which is never a good thing. If you can edit your post, and add the question, I can look to answer what you want to know. :-)

Answer 2

You need to load the appropriate external resources in Jsfiddle

bootstrap.min.js and bootstrap.min.css

see: http://jsfiddle.net/u4e64quc/4/

Alternatively, check bootstrap in the Jsfiddle options and no need to load external resources --this also fixes the issue with the icon outside of the form field pointed out in the comment