[Résolu] Calcul avec jQuery Repeater

bonjour tout le monde,

J'utilise jQuery Repeater pour faire une gestion de devis et de facture.
Ce plugin est bien pratique pour ajouter des lignes à la volée dans une saisie multi-éléments dont le nombre n'est pas déterminé.

Mais je me heurte à un problème. Sur chaque ligne j'ai un montant HT et un taux de TVA.
J'aimerais pouvoir automatiser le calcul pour chaque ligne.
Mais je ne vois pas comment intégrer la fonction de calcul.

voici le lien vers le plugin : https://github.com/DubFriend/jquery.repeater

voici le code HTML du formulaire (je ne met que l'élément répétable)

<div class="form-group mt-repeater">
					<div data-repeater-list="elements">
						<div data-repeater-item="" class="mt-repeater-item">
							<div class="row mt-repeater-row">
								<div class="col-md-6">
									<label class="control-label">Libellé</label>
									<input type="text" class="form-control" name="libelle" id="libelle">
								</div>
								<div class="col-md-1">
									<label class="control-label">Montant HT</label>
									<input type="text" class="form-control" name="montant_ht" id="montant_ht">
								</div>
								<div class="col-md-1">
									<label class="control-label">Taux TVA</label>
									<select class="form-control" name="taux_tva" id="taux_tva">
										<option value="5.5">5.5%</option>
										<option value="20">20%</option>
										<option value="0">Pas de TVA</option>
									</select>
								</div>
								<div class="col-md-1">
									<label class="control-label">Montant TVA</label>
									<input type="text" class="form-control" name="montant_tva" id="montant_tva">
								</div>
								<div class="col-md-1">
									<label class="control-label">Montant TTC</label>
									<input type="text" class="form-control" name="montant_ttc" id="montant_ttc">
								</div>
								<div class="col-md-2">
									<a href="javascript:;" class="btn btn-primary btn_calculator" style="margin-top: 1.8em;" id="calculator">calculer</a>
								</div>
								<div class="col-md-11">
									<label class="control-label">Description</label>
									<textarea class="form-control" name="description" id="description" rows="6"></textarea>
								</div>
								<div class="col-md-1">
									<a href="javascript:;" data-repeater-delete="" class="btn btn-danger mt-repeater-delete">
										<i class="fa fa-close"></i>
									</a>
								</div>
							</div>
						</div>
					</div>
					<a href="javascript:;" data-repeater-create="" class="btn btn-primary mt-repeater-add">
						<i class="fa fa-plus"></i> Ajouter un élément au devis</a>
				</div>

et le code Jquery :

var FormRepeater = function () {
	return {
		//main function to initiate the module
		init: function () {
			$('.mt-repeater').each(function(){
				$(this).repeater({
					show: function () {
						$(this).slideDown();
					},
					hide: function (deleteElement) {
						if(confirm('Etes vous sur de vouloir supprimer cet élément ?')) {
							$(this).slideUp(deleteElement);
						}
					},
					ready: function (setIndexes) {

						$(".btn_calculator").on("click", function (e) {
							e.preventDefault();
							montant_ht = $( event.target ).parent().parent().find("input#montant_ht").val();
							montant_ht = $( event.target ).parent().parent().find("input#montant_ht").val();
							taux_tva = $( event.target ).parent().parent().find("select#taux_tva").val();
							
							montant_tva = (montant_ht * taux_tva) / 100;

							console.log("montant HT : " + montant_ht);
							console.log("taux TVA : " + taux_tva);
							console.log("Montant TVA : " + montant_tva);
				        });
					}
				});
				
			});
		}
	};
}();

jQuery(document).ready(function() {
	FormRepeater.init();
});

le code ne fonctionne que pour la première ligne.

Comment le faire fonctionner pour toutes les lignes créées à la volée ?

Merci de votre aide