Jquery Clone And Remove Div

I have implemented jquery clone and remove. When ADD button is clicked a DIV A with certain form elements are cloned and inserted into another DIV B. In DIV A there is a hidden for

Solution 1:

The problem is you are calling .show() for all remove buttons. You need to limit it to only the new clone element. Like so:

$('.add').click(function(){
    id++;
    var prot = $(document).find(".rule").clone();
    prot.attr("class", 'rule'+id)
    prot.find(".id").attr("value", id);
    prot.find('input.remove').show();//<-- this is the important part

    $(document).find("div .group").append(prot);
});  

This code will now only call .show() on the remove button that is found within the newly cloned element

Solution 2:

$('.add').click(function(){
            id++;
            $('.fm-opt').children('.remove').show();
            var prot = $(document).find(".rule").clone();
            prot.attr("class", 'rule'+id)
            prot.find(".id").attr("value", id);

            $(document).find("div .group").append(prot);
    });   

should be changed as,

$('.add').click(function(){
            id++;
            var prot = $(document).find(".rule").clone();
            prot.attr("class", 'rule'+id)
            prot.children('.remove').show();
            prot.find(".id").attr("value", id);
            $(document).find("div .group").append(prot);
    });   

You should make visible only those buttons which have been cloned.

Solution 3:

While cloning add unique Id="" value for cloned element.

In remove method, you can easily access the unique element and remove it.