Question

I have a button next to a text box and when I click the button i want it to create another button next to another text box. This code is doing just that but the new button doesn’t work.

<div id="algorithm">
    <input type="button" id="add_child" value="+" />
    <input type="text" id="textbox0" />
</div>

$('#add_child').click(function() {
    $('<input type="button" id="add_child" value="+" />').appendTo('#algorithm');
    $('<input type="text" id="textbox0" />').appendTo('#algorithm');
}); 

Answer 1

I’d suggest trying this approach:

$('#algorithm').on('click','input',function(){
    $(this).clone(true,true).insertAfter($(this));
});

JS Fiddle demo.

Revised the above code to update the id attribute so that there are no duplicates:

$('#algorithm').on('click','input',function(){
    $(this).clone(true,true).attr('id','add_child' + $('input[type="button"]').length).insertAfter($(this));
});​

JS Fiddle demo.

References:

• attr().
• clone().
• insertAfter().
• on().
• [attribute="value"] selector.