I doppi id si creano nel momento in cui viene duplicato il contenuto del primo div (#divT63), cioè quando clicchi la freccetta del 63 per intenderci. Molti degli elementi al suo interno hanno degli id, tra cui gli ulteriori div che devi estendere. Dal momento che la tua funzione fa riferimento a questi id per poter risalire al contenitore in cui inserire il duplicato, il selettore jQuery rileva "giustamente" il primo contenitore (quello nascosto in cui c'è il contenuto originale che è stato appena duplicato), quindi il duplicato avviene ma nel posto sbagliato (il contenitore nascosto).
A prescindere dal fatto che vengono duplicati gli id, il problema è più che altro a livello concettuale, cioè stai usando un metodo macchinoso per eseguire un semplice toggle (mostra/nascondi).
Qui un esempio di come lo imposterei io:
codice:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("tr.toggle>td:first-child").click(function(){
$(this).closest('tr').toggleClass('chiuso aperto');
})
});
</script>
<style>
table{
width: 600px;
border-collapse:collapse;
background: #fff;
}
table, th, td{
border: 1px solid gray;
}
table td:first-child {
width: 20px;
min-width: 20px;
}
tr.toggle>td:first-child{
text-align: center;
vertical-align: top;
font: 9px/2 Arial, Helvetica, sans-serif;
color: #126dc9;
cursor: pointer;
}
tr.toggle>td:first-child:hover{
color: #2070ff;
background: #eee;
}
tr.toggle>td:first-child::before{
height: 20px;
}
tr.toggle.chiuso>td:first-child::before{
content: '▼';
}
tr.toggle.aperto>td:first-child::before{
content: '▲';
}
tr.toggle+tr{
background: #eee;
box-shadow: inset 0 3px 5px #0002;
}
tr.toggle.chiuso+tr{
opacity: 0;
display: none;
}
tr.toggle.aperto+tr{
opacity: 1;
display: table-row;
}
</style>
</head>
<body>
<table>
<tr class="toggle chiuso"><td></td><td>Lorem ipsum</td></tr>
<tr>
<td></td>
<td>Quisque suscipit sem non est eleifend consectetur.
<table>
<tr class="toggle chiuso"><td></td><td>Suspendisse malesuada massa lorem.</td></tr>
<tr><td></td><td>Aliquam in dolor vitae purus interdum vulputate vel ac augue.</td></tr>
<tr class="toggle chiuso"><td></td><td>Nullam suscipit metus id sem eleifend, ut molestie eros dictum.<br>Curabitur faucibus urna nec ullamcorper pharetra.</td></tr>
<tr><td></td><td>Nunc eget lacus at arcu scelerisque gravida ut non lectus.</td></tr>
<tr class="toggle aperto"><td></td><td>Donec sit amet</td></tr>
<tr><td></td><td>Fusce suscipit, eros id cursus suscipit, urna orci ullamcorper velit, sed ultricies mauris enim sed quam.</td></tr>
</table>
</td>
</tr>
<tr><td></td><td>Morbi venenatis nibh sit amet mi elementum semper.</td></tr>
</table>
</body>
</html>
Mettendo come convenzione che ad ogni tr che possegga una classe .toggle debba seguire il tr da mostrare/nascondere, ho utilizzato altre due classi (.chiuso e .aperto) che ovviamente si alternano. E' possibile quindi stabilire lo stato iniziale assegnando una di queste due classi. Il jQuery non fa altro che alternare le due classi quando si clicca sulla freccetta (dei tr toggle), tutto il resto è delegato al CSS che si occupa di mostrare le freccette in base allo stato corrente dell'elemento, e di conseguenza mostrare/nascondere i relativi tr, e infine definire tutta la parte presentazionale.
Nota come il tutto resta più pulito e più semplice da impostare, dal momento che le tre componenti della pagina sono separate distintamente: html (contenuti), css (presentazione), script (azione).
Ovviamente questo è solo un esempio di come poter impostare la cosa, eventualmente sta a te adeguarlo per poterlo integrare nel tuo elaborato. Poi è chiaro che si può comunque fare in tanti altri modi.