index.html

<!DOCTYPE html>
<html>

<head>
   <title>Shopping Cart</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />
   <link href="style.css" rel="stylesheet">
</head>

<body>

   <section>
      <div class="container">
         <div class="cart">
            <div class="col-md-12 col-lg-10 mx-auto">
               <div class="cart-item">
                  <div class="row">
                     <div class="col-md-7 center-item">
                        <img src="images/product-1.png" alt="">
                        <h5>iPhone 11 128GB Black</h5>
                     </div>

                     <div class="col-md-5 center-item">
                        <div class="input-group number-spinner">
                           <button class="btn btn-default"><i class="fas fa-minus"></i></button>
                           <input type="text" class="form-control text-center" value="1">
                           <button class="btn btn-default"><i class="fas fa-plus"></i></button>
                        </div>
                        <h5>$1219</h5>
                        <img src="images/remove.png" alt="" class="remove-item">
                     </div>
                  </div>
               </div>

               <div class="cart-item">
                  <div class="row">
                     <div class="col-md-7 center-item mx-auto">
                        <img src="images/product-2.png" alt="">
                        <h5>iPhone 11 Silicone Case - Black</h5>
                     </div>
                     <div class="col-md-5 center-item">
                        <div class="input-group number-spinner">
                           <button class="btn btn-default"><i class="fas fa-minus"></i></button>
                           <input id="case-count" type="text" class="form-control text-center" value="1">
                           <button id="case-incerease" class="btn btn-default"><i class="fas fa-plus"></i></button>

                        </div>
                        <h5 id="case-total">$59</h5>
                        <img src="images/remove.png" alt="" class="remove-item">
                     </div>
                  </div>
               </div>

               <div class="cart-item">
                  <div class="row">
                     <div class="col-md-8">
                        <h5>Subtotal: </h5>
                        <h5>Tax:</h5>
                        <h5>Total:</h5>
                     </div>

                     <div class="col-md-4 status">
                        <h5>$1,278</h5>
                        <h5>$0</h5>
                        <h5>$1,278</h5>
                     </div>
                  </div>
               </div>
               <div class="col-md-12 pt-4 pb-4">
                  <button type="button" class="btn btn-success check-out">Check Out</button>
               </div>
            </div>
         </div>
      </div>
   </section>


   <script>
      document.getElementById('case-incerease').addEventListener('click', function(){
         const caseInput = document.getElementById('case-count');

         const caseCount = parseFloat(caseInput.value)
         const caseNewCount = caseCount + 1;
         caseInput.value = caseNewCount;

         const caseTotal = caseNewCount * 59;
         document.getElementById('case-total').innerText = '$' + caseTotal
      })
   </script>


</body>

</html>