Ajuda para gerar novas linhas de tabela com names de textarea diferent

[JpBitencourt 0]

Olá, estou tentando achar uma solução para o meu problema, não entendo nada de javascript, mas se alguém puder me ajudar eu agradeço. Tenho o seguinte script que adiciona novas linhas em minha tabela sempre que clico em um botão, ele funciona perfeitamente porém cada td tem um textarea e gostaria de gerar um name diferente em cada linha. Alguém tem alguma sugestão de como poderia fazer isso? Segue o script:

<script>    
    var cadastro2 = {
    linha2: '<td align="center"><textarea class="cols3" rows="2" cols="12" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo1"></textarea></td>'+ 
            '<td align="center"><textarea class="cols3" rows="2" cols="12" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo2"></textarea></td>'+ 
            '<td align="center"><textarea class="cols3" rows="2" cols="12" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo3"></textarea></td>'+ 
            '<td align="center"><textarea class="cols3" rows="2" cols="12" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo4"></textarea></td>'+   
            '<td align="center" colspan="2"><textarea class="cols4" rows="2" cols="35" style="overflow: hidden" onkeyup="this.style.height=\'24px\'; this.style.height = this.scrollHeight + 1 + \'px\';" onkeydown="this.style.height=\'24px\'; this.style.height = this.scrollHeight - 1 - \'px\';" name="campo5"></textarea></td>'+ 
            '<td align="center" class="semborda"><input type="button" value="-" class="ui-button ui-widget ui-state-default ui-corner-all principal" onclick="javascript:deleteRow2(this.parentNode.parentNode.rowIndex)" title="Remover linha"></input></td>',

    adicionarLinha2: function(){
        //encontrar o elemento com id "tblCadastroTBody2" (tbody)
        var tbody = document.getElementById('tblCadastroTBody2');

        //criar um novo elemento do tipo TR
        var tr = document.createElement('tr');

        //colocar o conteúdo da linha no TR
        tr.innerHTML = cadastro2.linha2;

        //inserir a linha criada no tbody
        tbody.appendChild(tr);
    }
}
</script>

Desde já agradeço.

[ygor.anjos 23]

Não sei se vai conseguir entender mas eu faria o seguinte:

salvaria a quantidade de linhas em um campo hidden no html, e toda vez que adicionar uma linha atualizar esse campo, e depois usar Jquery para alterar o name do textarea com "algumaCoisa+valorDoCampoHidden" (ex: name="algumaCoisa3", no caso da 3 linha)

não sei se ficou claro hehe

mas da pra ter uma ideia