jquery追加导致重复的问题

Question

我正在尝试将一个元素附加到div面板而没有复制2.如果我追加到正文，它可以正常工作，但如果我追加到div，则会增加2个。

$("#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>