需要附加html元素作为用户继续单击带有jquery的按钮

Question

I am trying to append a div multiple times when clicking a button, the problem is that is only appending once. I need to append same div as user keeps clicking.

• DIV I need to append multiple times is stored in a variable named $htmlDivForm in the jquery code.
• I'm using bootstrap.

HTML code:

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <form id="formUser" action="index.html" method="post">
                <div class="text-center">
                    <button id="moreFieldsBtn" class="btn" type="button" name="button">+</button>
                </div>
            </form>
        </div>

        <div class="col-md-9">
            More Content...
        </div>

    </div>
</div>

jquery code:

var $moreFieldsBtn = $("#moreFieldsBtn");
var $formUser = $("#formUser");
var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>');


//Add input text field
$($moreFieldsBtn).click (function() {
    $($formUser).append($htmlDivForm);
});

Answer 1

You can't append the same div multiple times, you need to instantiate new divs and attach those. You also don't need to re-wrap the jQuery objects to attach the handlers:

var $moreFieldsBtn = $("#moreFieldsBtn");
var $formUser = $("#formUser");

//Add input text field
$moreFieldsBtn.click(function() {
    var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>');
    $formUser.append($htmlDivForm);
});

Answer 2

I had gone through your question.

I have Updated the example.

Removed the Object and just inserting plain HTML

 var $moreFieldsBtn = $("#moreFieldsBtn"); var $formUser = $("#formUser"); var $htmlDivForm = $('<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>'); var htmltext = '<div class="form-group"><label class="labelName" for="inputText">Nombre</label><input class="form-control inputTextField" type="text" name="inputText" value=""></div>' //Add input text field $($moreFieldsBtn).click (function() { $($formUser).append(htmltext); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-3"> <form id="formUser" action="index.html" method="post"> <div class="text-center"> <button id="moreFieldsBtn" class="btn" type="button" name="button">+</button> </div> </form> </div> <div class="col-md-9"> More Content... </div> </div> </div> <div>