Show the total based on select menu

Show the total based on select menu

I have this html below where the user can select how many "registrations" wants for each registration type. Each registration type has a price associated, so if the price of registration type "general" is "10€" and the price of the registration type "plus" is "5$" and the user selects just one of each registration type the total is 15$. 

But if the user selects one of the registration type "general" and two of the registration type "plus" the total is 20$.

Do you know how to properly show the total in the <span> with class ".  total" based on user select menu selection ?


  1. <div class="card">
  2.   <div class="card-header d-flex justify-content-between">
  3.     <span class="w-100">Registration Type</span>
  4.     <span class="w-50">Quantity</span>
  5.     <span class="w-50">Price</span>
  6.   </div>
  7.   <div class="card_body">
  8.     <ul class="list-group list-group-flush">
  9.       <li class="list-group-item d-flex align-items-center justify-content-between">
  10.         <div>
  11.           <span>General</span>
  12.         </div>
  13.         <form>
  14.           <select>
  15.             <option >1</option>
  16.             <option >2</option>
  17.             <option >3</option>
  18.           </select>
  19.         </form>
  20.         <span>X 10€</span>
  21.       </li>
  22.       <li class="list-group-item d-flex align-items-center justify-content-between">
  23.         <div>
  24.           <span>Plus</span>
  25.         </div>
  26.         <form>
  27.           <select>
  28.             <option >1</option>
  29.             <option >2</option>
  30.             <option >3</option>
  31.           </select>
  32.         </form>
  33.         <span>X 5€</span>
  34.       </li>
  35.       <li class="list-group-item d-flex align-items-center justify-content-between">
  36.         <div>
  37.           <span>TOTAL</span>
  38.         </div>
  39.         <span class="total">10.00€</span>
  40.       </li>
  41.     </ul>
  42.   </div>
  43.   <div class="card-footer">
  44.     <a  href="">Next</a>
  45.   </div>
  46. </div>

jQuery:

  1. $("#general, #plus").change(function () {
  2.   var general = $("#general").val();
  3.   var plus = $("#plus").val();

  5.   var total = general + plus;
  6.   $(".total").text(total).fadeIn();

  8. });