Blessan Kurien Blessan Kurien - 7 months ago 20
jQuery Question

jquery append and remove :removing order is not correct

I am trying to implement a functionality that user can add and remove two text fields (ie heading, and description) using jquery,

add more
functionality is works fine but the
order is not correct.

Hers is the fiddle that shows the problem


var append = '<div><div class="form-group"> <label>Day 1</label><input type="text" value="" name="subHeading" class="form-control"></div>';
append += '<div class="form-group"> <label>Description</label> <textarea class="form-control" name="description"></textarea>';
append += '</div><button type="button" class="btn btn-danger remove" id="btnAddMore">Remove</button></div>';

$('#btnAddMore').click(function() {

$('body').on('click', '.remove', function() {

Also i need one more thing when a user is click
add more
button I am showing a label thay shows
day 1
if adding another item the it will show
day 2
and so on.

  • Update text of the label after append/remove
  • Give some class to identify parent element of container.
$('.days').text(function(index) {
  return 'Day ' + (index + 1)

Updated Fiddle