Interactivité formulaire symfony

<label>Prix 1 <input type="text" name="prix1" class="prix"></label>
<label>Quantité 1 <input type="text" name="quantite1" class="quantite" value="1"></label>
<br>
<label>Prix 2 <input type="text" name="prix2" class="prix"></label>
<label>Quantité 2 <input type="text" name="quantite2" class="quantite" value="1"></label>
<br>
Total : <input type="text" class="total" readonly>

// on récupère tous les input class="prix"
var inputsPrix = document.querySelectorAll('.prix');
// on récupère tous les input class="quantite"
var inputsQuantite = document.querySelectorAll('.quantite');

// on ajoute un listener sur tous les input prix et quantite pour exécuter la fonction calculTotal() dès qu'on change une de leur valeur
for (var i = 0; i < inputsPrix.length; i++) {
  inputsPrix[i].addEventListener('change', calculTotal);
}
for (var i = 0; i < inputsQuantite.length; i++) {
  inputsQuantite[i].addEventListener('change', calculTotal);
}

function calculTotal() {
  var total = 0;

  for (var i = 1; i <= inputsPrix.length; i++) {
    // on calcul le total : prix1 * quantite1 + prix2 * quantite2 ...
    var prixI = document.querySelector('[name="prix' + i + '"]').value;
    var quantiteI = document.querySelector('[name="quantite' + i + '"]').value;
    total += prixI * quantiteI;
  }

  document.querySelector('.total').value = total;
}