I am trying to append an element to a div panel with out it duplicating by 2. It works fine if I append to the body, but If I append to a div it adds 2 more.
$("#click").click(function () {
$("#panel1").append(txt_box='<div id="sample" id="input_'+id+'" ><img src="assets/img/bluesticky4.png"/><img src="addClick/remove.png" class="remove"/></div>');
$("#button_pro").append(txt_box);
id++;
});
var id=1,txt_box;
$('#button_pro').on('click','.add',function(){
$(this).remove();
txt_box='<div id="sample" id="input_'+id+'" ><img src="assets/img/bluesticky.png"/><img src="addClick/remove.png" class="remove"/></div>';
$("#button_pro").append(txt_box);
id++;
});
$('#button_pro').on('click','.remove',function(){
var parent=$(this).parent().prev().attr("id");
var parent_im=$(this).parent().attr("id");
$("#"+parent_im).slideUp('medium',function(){
$("#"+parent_im).remove();
});
});
});
</script>