Onglet en js + texte qui disparait

Bonjour les amis, je me tourne vers vous car j'ai un probleme avec mon js. Je vous explique : j'ai un bouton, ce bouton délenche un évenement qui crée un textarea et un onglet. Lorsque j'appuis sur ce bouton, l'onglet se crée mais le textarea s'affiche sous l'ancien, il faut cliquer sur l'Onglet pour que le textarea disparaisse. De plus lorsque je crée 5 onglets par exemple, que j'écris du contenus dedans et que je recrée un sixieme onglet, le texte dans les textareas disparaissent. Savez vous de quoi cela peut venir?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
						var compteur = <?php echo $v; ?>;
						function incrementer()
						{
							compteur=compteur+1;
							document.getElementById('onglets').innerHTML += '<li>Onglet ' + compteur +'</li>';
							document.getElementById('contenu').innerHTML += '<div class="item"><textarea name="data[Fichier][content]['+compteur+']" id="" cols="30" rows="10" style="width: 488px;"><div></textarea></div>';
 
						}
 
 
							$(function() {
							$('#onglets').css('display', 'none');
							$('#onglets').click(function(event) {
								var actuel = event.target;
								if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
									alert(actuel.nodeName)
									return;
								}
								$(actuel).addClass('actif').siblings().removeClass('actif');
								setDisplay();
							});
							function setDisplay() {
								var modeAffichage;
								$('#onglets li').each(function(rang) {
									modeAffichage = $(this).hasClass('actif') ? '' : 'none';
									$('.item').eq(rang).css('display', modeAffichage);
								});
							}
								setDisplay();
								});
							</script>