Jquery sur Jsfiddle

Bonjour,

Voila je rencontre un petit problème avec mon code.

Je dois faire une single one page à l'aide de jsfiddle.
Je dois aussi intégrer un code jquery.
Aussi j'ai trouvé un code sympa (trouvé ici - http://try.jquery.com/levels/4/sections/12) que j'ai recopié. Mais ce n'est pas le résultat final voulu. Car je souhaite que lorsque je change le nombre de ticket, alors le prix total affiché en bas s'affiche/additionne automatiquement.
Est ce que c'est parce que je n'ai pas bien compris comment déclencher le jquery sur jsfiddle ?
Ou bien parce que mon code n'est pas bon ?

Voici le lien jsfiddle https://jsfiddle.net/hfhgd/g7x387wa/3/

Pouvez-vous m'aider please please ?

MON CODE

<h3>Reservation</h3>
<p>$7 per ticket</p>
<p>
Tickets:
<input type="number" class="quantity" value="1"/>
</p>
</div>
<p>Total Price: $<span id="Total">7</span></p>

$(document).ready(function(){
$(".reservation").on("keyup", ".quantity", function(){
  var price=+$(this).closest(".reservation").data("price");
  var quantity= +$(this).val();
  $("#Total").text(price * quantity);
});
}); ```

C que je veux

je souhaite avoir ce résultat final sur jsfiddle avec bon code et bonne librairie jquery sur jsfiddle

Merci bcp à tous !!!!!!!!!!!!