Salut à vous !

Là j'ai un problème que je n'arrive pas à résoudre malgré les différents tutos que j'ai suivi.
Voilà j'ai réussis à créer un tableau de deux lignes à laquelle on peut ajouter une ligne a chaque fois qu'on clique sur un bouton.

Voici mon code HTML :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<style type="text/css">
        #idTable, th, td {
                border: 1px solid black;
        }
</style>
<body>
	<table id="idTable">
		<thead>
			<tr>
				<th>Désignation</th>
				<th>Prix dachat<br>par casier (Francs CFA)</th>
				<th>Quantité</th>
				<th>Montant<br>(Francs CFA)</th>
			</tr>
		</thead>
		<tbody id="tblBody">	
			<tr>		
				<td id="boisson">	
					<select name="boissonId" id="boissonId">
						<option value="">100000000</option>				
					</select>
				</td>
				<td id="prix">
					<input type="number" name="pacasier" id="pacasier" onblur="calculerCellules()">
				</td>
				<td id="quantite">
					<input type="number" name="qte" id="qte" onblur="calculerCellules();">
				</td>
				<td id="somme">
					<input type="number" name="montant" id="montant" readonly>
				</td>
			</tr>
		</tbody>
	</table>
 
	<button onclick="insererCellules();">Insérer</button>
</body>
</html>

Et le code JavaScript :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script type="text/javascript">
		var tableau = document.getElementById("idTable");
 
		function calculerCellules() {
 
			for (var i = 1; i < tableau.rows.length; i++) {
 
				for (var j = 0; j < tableau.rows[i].cells.length; j++) {
 
					var calcul;
					calcul = tableau.rows[i].cells[1].children[0].value * tableau.rows[i].cells[2].children[0].value;
					tableau.rows[i].cells[3].children[0].value = calcul;
 
				}
 
			}
 
		}
 
		var tblBody = document.getElementById("tblBody");
 
		var b = 1;
		var a;
 
		// Déclaration des cellules du tableau
		var boisson = document.getElementById("boisson");
		var prix = document.getElementById("prix");
		var quantite = document.getElementById("quantite");
		var somme = document.getElementById("somme");
 
		// Déclaration du contenu des cellules du tableau
		var boissonId = document.getElementById("boissonId");
		var pacasier = document.getElementById("pacasier");
		var qte = document.getElementById("qte");
		var montant = document.getElementById("montant");
		var mtt = document.getElementById("mtt");
 
		function insererCellules() {
			var cell1, cell2, cell3, cell4, ligne;
			var nbLignes = tableau.rows.length;
 
			ligne = tableau.insertRow(-1);
			ligne.id = b;
 
			cell1 = ligne.insertCell(0);
			cell1.innerHTML = boisson.innerHTML;
			cell1.id = boisson.id + b;
			cell1.children[0].id = boissonId.id + b;
 
			cell2 = ligne.insertCell(1);
			cell2.innerHTML = prix.innerHTML;
			cell2.id = prix.id + b;
			cell2.children[0].id = pacasier.id + b;
 
			cell3 = ligne.insertCell(2);
			cell3.innerHTML = quantite.innerHTML;
			cell3.id = quantite.id + b;
			cell3.children[0].id = qte.id + b;
 
			cell4 = ligne.insertCell(3);
			cell4.innerHTML = somme.innerHTML;
			cell4.id = somme.id + b;
			cell4.children[0].id = montant.id + b;
 
			a = nbLignes;
			b++;
 
			tblBody.appendChild(ligne);
		}
	</script>
J'arrive à ajouter autant de lignes que je souhaite et les calculs se font sans soucis. Le problème est que quand je veux les enregistrer dans ma base de données, il n'y a qu'une ligne qui part. Toutes les lignes ajouté par javascript ne s'enregistre pas!
SVP aidez-moi, je sais qu'ici au moins je peux compter sur vous.

Merci d'avance