jQuery - Clonagem

Eai pessoal!

Estou utilizando .clone() pra clonar e .append para informar o local de clonagem. Está funcionando legal a clonagem de elementos e seus respectivos valores. Mas gostaria de clonar uma div que contém os elementos, por exemplo:

(salvar .html)

<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">](http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js)
<script type="text/javascript">
$(document).ready(function(){

	var $pergunta = $("select[name=cod_pergunta[]]");
	var $resposta = $("textarea[name=resposta[]]");
	$('#clones').hide();

	$('a').click(function(){
 $('#clones').fadeIn(300);
 $("#clone_pergunta").append($($pergunta).clone(true).insertAfter($pergunta));
 $("#clone_resposta").append($($resposta).clone(true).insertAfter($resposta));
	});

});
</script>

<style type="text/css" media="projection,screen">

* { margin:0; padding:0; } body { margin:10px; } dl, hr { margin:10px 0; } dt, dd { padding:5px; } dt { background:#C00; } dd { background:#060; }

</style>

<a href="java script:void(0);">clonar</a>

<hr>

<div id="teste">
 <dl>
	<dt><label>Label:</label></dt>
	<dd>
	<select name="cod_pergunta[]" id="cod_pergunta">
	<option value="a">AAA</option>
	<option value="b">BBB</option>
	</select>
	</dd>
	<dt><label>Label:</label></dt>
	<dd><textarea name="resposta[]" id="resposta">CCC</textarea></dd>
 </dl>
</div>

<hr>

<div id="clones" style="display:none;">
 <dl>
	<dt></dt>
	<dd id="clone_pergunta"></dd>
	<dt></dt>
	<dd id="clone_resposta"></dd>
 </dl>
</div>
No caso acima estou clonando os elementos **select** e **textarea**.

Quando clico no link clonar ele aparece exatamente como eu quero, mas apartir do segundo clique clona no mesmo local, por isso gostaria de clonar a div teste, não sei se é possivel...

agradeço a ajuda!