Forms 追加divs更改其内容动态

我有一个名为cdefualt的dif，其中包含来自表单的一些输入，我想这样做来克隆它并更改输入名称：

var i = 2;
function add() {
    var item = $('#cdefault').clone();
    item.attr({'style': ''});
    $xpto = 'gtitle'+i;
    $xpto2 = 'gmessage'+i;
    item.id = $xpto;
    $('#'+$xpto+' input[id="gtitle1"]').attr('name', $xpto);
    $('#'+$xpto+' textarea[id="gmessage1"]').attr('name',$xpto2);
    $(item).appendTo('#ccontainer');
    i++;
}

但这不起作用。我也已经尝试过了，但它只运行了两次（对于原始克隆和第一个克隆）：

甚至试着这样做：

function add() {
    $xpto = 'gtitle'+i;
$xpto2 = 'gmessage'+i;
    var div = document.getElementById('cdefault');
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
    clone.id = $xpto;
    clone.style.display = '';
    $("#"+$xpto+" input[id='gtitle1']").attr('name', $xpto);
    $("#"+$xpto+" textarea[id='gmessage1']").attr('name',$xpto2);
    document.getElementById('ccontainer').appendChild(clone);

    i++;
}

---

已修复。已将cdefault id更改为id0，并且此java脚本：

var i = 2;
var c = 0;
function add() {
    $xpto = 'gtitle'+i;
    $xpto2 = 'gmessage'+i;
    var klon = $( '#id'+ c );
    klon.clone().attr('id', 'id'+(++c) ).insertAfter( '#inserthere' );
    document.getElementById('id'+(c)).style.display = '' ;
    $("#id"+(c)+" input[id='gtitle1']").attr('name', $xpto);
    $("#id"+(c)+" textarea[id='gmessage1']").attr('name',$xpto2);
    i++;
}

---

一把小提琴会有助于理解这一点。完成了，但它的代码太多了，我试图在那里粘贴一些东西，所以ppl得到了想法。我有一个隐藏的div，我想克隆它，但不知怎么更改了表单名。

var i = 2;
var c = 0;
function add() {
    $xpto = 'gtitle'+i;
    $xpto2 = 'gmessage'+i;
    var klon = $( '#id'+ c );
    klon.clone().attr('id', 'id'+(++c) ).insertAfter( '#inserthere' );
    document.getElementById('id'+(c)).style.display = '' ;
    $("#id"+(c)+" input[id='gtitle1']").attr('name', $xpto);
    $("#id"+(c)+" textarea[id='gmessage1']").attr('name',$xpto2);
    i++;
}