Append Another Div

Question

I'm trying to append another form-group. The button at the form-group added is not working. Can anyone tell me why?

 <div class="form-group">
  <input type="text"/>
  <button class="add">Add</button>
 </div>

JS

 $('.add').click(function(){
 $('.form-group').append(
 '<input type="text"/>'+
 '<button class="add">Add</button>'
 );
})

Answer 1

You need to use event delegation via .on() for dynamically added elements:

$('.form-group').on('click', '.add', function() {
  $('.form-group').append(
    '<input type="text"/>' +
    '<button class="add">Add</button>'
  );
})

jsFiddle example