I have add clone (more than 3) and remove clone button. when i try to clone
<div class="data-add">
<div class="form-group" id="id1">
<label class="col-lg-2 control-label"> Image* : </label>
<div class="col-lg-10">
<input id="input-702" name="userfile[]" type="file"class="file-loading">
</div>
</div>
<div class="form-group clearfix" id="id2">
<label class="col-lg-2 control-label">option* :
</label>
<div class="col-lg-10">
<select name="option[]" autocomplete="off">
<option>name1</option>
<option>name2</option>
<option>name3</option>
</select>
</div>
</div>
</div>
<button class="add" type="button">Add Another </button>
<button class="remove" id="remove"> remove </button>
$(".add").click(function(){
$("#id1").clone().appendTo(".data-add");
$("#id2").clone().appendTo(".data-add");
});
It clone particular div happening proper. when i click remove its not working (not able to remove)
$(".remove").click(function(){
$(this).closest("#id1").remove();
$(this).closest("#id2").remove();
});
i have tried this also
$(".remove").click(function(){
$(this).parents("#id1").remove();
$(this).parents("#id2").remove();
});
$(".remove").click(function(){
$("#id1").remove();
$("#id2").remove();
});
when i used like this it removing first clone(first id1 and id2). not removing current clone div