I have a dynamic div creation issue when using the clone function. I added a remove button that should remove only the clicked div, but instead it is removing all of them. Check out the code below for reference:
<div class="container">
<div class="row">
<div class="col-xs-6">
<form class="form-horizontal" role="form">
<div id="0" class="address">
<div class="form-group">
<label class="col-sm-2 control-label">Address Line1</label>
<div class="col-sm-10">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Address Line2</label>
<div class="col-sm-10">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">State</label>
<div class="col-sm-10">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Post Code</label>
<div class="col-sm-10">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-remove-sign"></i>Remove</button>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default btn-add"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>
<button class="btn btn-success btn-add"><i class="glyphicon glyphicon-floppy-save"></i>Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
JavaScript
var id = 0;
$(".btn-add").click(function (event) {
event.preventDefault();
var cloneId = $('#' + id);
//clone to new Address form
var newAddressForm = cloneId.clone();
//increase id
id++;
// change Id of new form
newAddressForm.attr("id", id);
//set input value to null/empty
newAddressForm.find('input').val('');
newAddressForm.insertAfter(cloneId);
});
$(".address input:button").click(function (event) {
event.preventDefault();
$(this).parent('div').remove();
});