<body>
    <div class="container">
	<form method="POST" action="">
	    <div class="row">
		<div class="col text-center">
		    <span class="px-2">Annuel</span>
		    <div class="custom-control custom-switch">
		        <input type="checkbox" class="custom-control-input" id="customSwitches" name="engagement">
		        <label class="custom-control-label" for="customSwitches"></label>
		    </div>
		    <span>Mensuel</span>
		</div>
	    </div>
	    <div class="row">
		<div class="form-group offset-2 col-8 shadow abonnement">
		  <div class="py-4">
		        <h4>ABONNEMENT</h4>
		        <span class="price"></span>
		        <sup>€<span class="star">*</span></sup>
		        <sub>HT</sub>
		    </div>

		    <div class="form-group text-center">
		        <label>Nombre d'utilisateur</label>
		        <input type="number" class="form-control" id="inputNbUtilisateur" placeholder="2" value="1" min="0" max="10000" required>
		    </div>

		    <div class="ps">
		        <span class="star">*</span> par mois / par utilisateur
		        <br />
		        facturation annuelle
		    </div>
		</div>
	    </div>
	    <div class="text-center">
		<button type="submit" name="cart" id="btnNextCart" class="btn btn-primary text-center" disabled>Souscrire</button>
	    </div>
	</form>
    </div>
</body>
</html>
/**********************************
************ VARIABLES ************
***********************************/
$black: #000;
$green: #68A768;
$grey:  #aaaaaa;
$lgrey:  #efefef;
$red: #c00000;
$white: #fff;

/**********************************
************** RESET **************
***********************************/
body { background-color: $white;}
.mensuel, .annuel { color: $black; }

form {
  width: 90%;
  margin: 10px auto;
}

/*********************************
********** Switch OnOff **********
**********************************/
.custom-switch {
  display:inline;
}

.custom-control-input:checked~.custom-control-label::before,
.custom-control-label::before {
  color: $white;
  background-color: $red;
  border: 1px solid $black;
}

.custom-switch .custom-control-label::after {
  background-color: $white;
}

.abonnement {
  text-align: center;

  input[type=number] {
    width: 100px;
    margin: 0 auto;
  }

  img {
    max-width: 216px;
    display: block;
    margin: 10px auto 0 auto;
  }

  h4 {
    text-align: center;
    font-weight: 500;
  }

  h4, .star { color: $red; }

  .price {
    font-size: xx-large;
  }
  sup {
    top: -0.5em;
    left: 0em;
    font-size: x-large;
  }
  sub {
    bottom: -0.5em;
    left: -2.75em;
    font-size: x-small;
  }
  .ps {
    font-size: 13px;
    line-height: 1em;
    font-style: oblique 20deg;
    margin-bottom: 10px;
  }
}
View Compiled
// links : https://jf-blog.fr/calculatrice-dabonnement-dynamique
$(document).ready(function() {
	let toggle = false;
	let res, nbUser;

	// Element
	let user = $('#inputNbUtilisateur');
	let switchAbo = $('#customSwitches');
	let price = $('.price'); // Element à modifier à chaque fois

	// Prix abonnement
	let annualPrice = "9.90";
	let monthlyPrice = "19.90";

	// initialise la valeur du premier calcul (1 abo annuel * 1 utilisateur)
	price.text(annualPrice);

	// Quand le toggle change, switch du prix annuel/mensuel
	switchAbo.click(function () {
		nbUser = user.val();
		if (toggle) {
			res = annualPrice*nbUser;
			price.text(res.toFixed(2));
			toggle = false;
		} else {
			res = monthlyPrice*nbUser;
			price.text(res.toFixed(2));
			toggle = true;
		}
	});

	// Calcul du resultat
	user.on('keyup keypress blur change', function (e) {
		nbUser = user.val();
		if (!toggle) {
			res = annualPrice*nbUser;
			price.text(res.toFixed(2));
			toggle = false;
		} else {
			res = monthlyPrice*nbUser;
			price.text(res.toFixed(2));
			toggle = true;
		}
	});
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js