Problems with . clone() to radio Buttons

Question

I’m making an "add" button that every click adds a div com Radio Buttons below the div itself. I have trouble clicking on the radios that when I click on of some added line and click on another line it erases the value clicked before and only leaves the value clicked at the moment.

this is my code:

   $("#adiciona-fone").click(function () {
     // altero o valor div // 
    var divDuplica = $("#duplica").clone();
    divDuplica.attr('id', 'duplica_'+contador);

    //altero o valor do id hidden //
    divDuplica.children(":input").attr('id','id-telefone_'+contador);

    // altero o valor do id da div que tem todos os radios
    divDuplica.children("#tipo-fone-pessoa").attr('id','tipo-fone-pessoa_'+contador);
    var divTipoFone = divDuplica.children("#tipo-fone-pessoa_"+contador);
    var inputDivTipoFone = divTipoFone.children('.radio').attr('id', 'radio_'+contador);

    // boto a div no fim da div.
    $("#duplica").after(divDuplica);
    contador++
    return false;
});

This is my html :

Answer 1

Radio Buttons "interact with each other" through the name.

When you clone a line with radio Buttons you are in fact adding new options to radio Buttons from the previous line.

I suggest you create an intelligence to add new lines without using the clone, so that you use a different name.

Or use the same methods you used to give a unique id only for the name attribute.