Affichage champ depuis JavaScript

Bonjour
je me permets d'ouvrir un nouveau sujet n'ayant plus d'idées pour résoudre mon problème...
J'ai une liste à gauche avec des noms que je fais "passer" vers la droite... cela me renseigne un ensemble de champs en dessous avec un numéro pour la personne, son nom et prénom. Ensuite je peux renseigner son rôle (en français en anglais)... Comme sur la capture d'écran ci dessous...

Pièce jointe 188709

Mon problème c'est que si je renseigne les champs rôle et qu'ensuite je rajoute une personne tous mes champs rôles pour les personnes déjà présentes dans la liste de droite disparaissent... du coup je suis obligé de les ressaisir... Alors que je voudrais les "conserver" pour n'avoir à renseigner que celui de la personne "supplémentaire"...

Voici mon code dans la page...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<select multiple class="" id="aloha" name="test[]">
          <?php do { 
                  // num_artiste avant *
                  // nom_artiste et prenom_artiste après *
                  // fin de chaine marquée par un ;
                  ?>
          <option value="<?php echo $row_artistes['num_artiste']."*".$row_artistes['nom_artiste']." ".$row_artistes['prenom_artiste'];?>"><?php echo $row_artistes['nom_artiste']." ".$row_artistes['prenom_artiste']?></option>
          <?php } while ($row_artistes = mysql_fetch_assoc($artistes)); ?>
        </select>
 &nbsp; 
<!--Selection multiple Personnel-->
<script type="text/javascript">

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
$('#aloha').multiSelect({
 	afterSelect: function(values){
		/* récupération des différentes valeurs de paramètres */
		var str = '';
		var str = str + values;
		var n = str.indexOf("*");
		var numartiste = str.substring(0, n);
		n = n+1;
		var nomartiste = str.substring(n);
		var nomartiste = nomartiste.toUpperCase();
		/* Affichage des infos dans le DIV */
		document.getElementById('affich').innerHTML = document.getElementById('affich').innerHTML + "<div class='ligne_personnel' id='" + numartiste + "'><input type='text' value='" + numartiste + "' size='4' readonly='readonly' />" + "<input  type='text' value='" + nomartiste + "' size='35' readonly='readonly'/>" + " Role : <input type='text' name='" + numartiste + "' size='52' /><BR>" + " Role (UK) : <input type='text' name='uk" + numartiste + "' size='52' /><BR></div>";
		/* MAJ du champ caché*/
		var oldValue = document.getElementById('artistes').value;
		document.getElementById("form1").elements["artistes"].value = oldValue + numartiste + ';';
  },
  afterDeselect: function(values){
	  	/* Récupération du numéro Artiste */
		var str = '';
		var str = str + values;
	  	var n = str.indexOf("*");		
		var numartiste = str.substring(0, n);
		/* Suppression dans le champ caché */
		var str2 = document.getElementById("form1").elements["artistes"].value;
		var chaineASupprimer = numartiste + ";";
		str2 = str2.replace(chaineASupprimer, "");
		document.getElementById("form1").elements["artistes"].value = str2;
		/* suprresion de la DIV correspondante */
	  	var element = document.getElementById(numartiste);
		element.parentNode.removeChild(element);
  }
});

Code:

1
2
3
4
5
6
7
</script>
<!--Affichage du Personnel dans la DIV-->
<div id="affich"></div>
<p>
  <input name="artistes" type="text" id="artistes" size="100" readonly="readonly" />
  <BR />
</p>

Quelqu'un aurait une idée ?

Merci d'avance