qty minus plus checkout page

Demo : https://mdbootstrap.com/snippets/jquery/marta-szymanska/363365

CSS : 
/* quantity box */
.quantitybox{ display: table; }
.quantitybox i{ cursor: pointer; float: left; color: #aeaeae;
font-size: 15px;
padding: 7px;
margin-top: 10px; }
.quantitybox .qty{ float: left; width: 40px; height: 25px; text-align: center; background-color: #fff; }
.quantitybox input::-webkit-outer-spin-button,
.quantitybox input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* quantity box */


HTML : 
<div class="quantitybox">

                                            <i class="fa fa-minus" aria-hidden="true" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"></i>
                                            <input type="number"  class="qty" value="1" min="1" max="100" readonly="">
                                            <i class="fa fa-plus" aria-hidden="true" onclick="this.parentNode.querySelector('input[type=number]').stepUp()"></i>
 
                                        </div>