Calcul automatique avec ajout de champs de formulaire

Salut a tous,
je suis pas un expert en JS et j'essaie de gérer avec des bout de code par si par la.
voila mon problème.
j'ai un formulaire auquel je peux ajouter des champs via un script JS, ça cela marche voici le code :

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
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
 
  <a href="#" class="add"><button class="btn btn-success">Ajouter</button></a> <a href="#" class="del"><button class="btn btn-danger">Supprimer</button></a>	<br />
	<form id="myForm" method="post" action="test_envoi.html" >
 
 
      <fieldset>
		<div class="col-xs-12 col-sm-1 col-md-1 col-lg-1">
		<label for="qte1"></label>
		 <input class="form-control" id="qte1" name="qte1" type="text" value="" onblur="calcul()"/>
		</div>
 
		<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
		<label for="description1"></label>		
		 <input class="form-control" id="description1" name="description1" type="text" value="" />
		</div>
 
		<div class="col-xs-12 col-sm-1 col-md-1 col-lg-1">
		<label for="prix1"></label>		
		 <input class="form-control" id="prix1" name="prix1" type="text" value=""  onblur="calcul()" />
		</div>
 
		<div class="col-xs-12 col-sm-1 col-md-1 col-lg-1">
		<label for="total1"></label>		
		 <input class="form-control" id="total1" name="total1" type="text" value="" />
		</div>
 
      </fieldset>
	  <div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">	<br />  	  
      <input type="submit" value="Envoyer" />
	  </div>
	  </div>
   </form>
	</div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function(){
 
         var nb = 1;
         $('.add').click(function(){
            var ligneTemp = $(myForm).children("fieldset:last");
            ligneTemp.after(ligneTemp.clone(true));
            $(myForm).children("fieldset:last").hide().fadeIn();
            var ligneTemp = $(myForm).children("fieldset:last");
            ligneTemp.find('label').each(function() {
               tempLabel = $(this).attr("for").replace(nb, nb+1);
               $(this).attr("for",tempLabel);
            });
            ligneTemp.find('input').each(function() {
               this.id= this.id.replace(nb, nb+1);
               this.name= this.name.replace(nb, nb+1);
               this.value= "";
            });
            nb++;
         });
         $('.del').click(function(){
            if (nb>1) { // Pour qu'il reste au moins une ligne
               $(myForm).children("fieldset:last").fadeOut(300, function(){$(this).remove();});
               nb--;
 
            }
         });
      });
   </script>

ensuite je voudrais que certains input puisse se calculer, ici "quantité x prix" pour s'afficher dans le input total.
cela fonctionne avec se petit script

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
function calcul(){
                var quantite = Number(document.getElementById("qte1").value);
 
                var prix = Number(document.getElementById("prix1").value);
 
                var total = Number(quantite * prix);
                document.getElementById("total1").value = total;
            }
</script>

le problème et vous l'avez compris c'est que lorsque j'ajoute des champs mon script de calcul ne fonctionne plus car les id
des imput ne sont plus les bons.
a chaque ajout de ligne les ids sont incrementer de +1.
comment faire pour incrémenter les id des champs dans le script calcul a moins que vous connaissiez une autre solution ?

Merci d'avance de votre aide
Cdt