<div class="uk-flex-1 uk-flex">

  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">

    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">

      <div class="uk-width-1-1">

        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">Increase and decrease action for input field</div>

        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding-small uk-border-rounded">

          <!-- Start code -->

          <div class="uk-child-width-1-2@m uk-grid-small uk-text-center" uk-grid>

            <div>

              <div class="uk-form-label uk-margin-small-bottom">Input with default style</div>

              <div class="uk-inline uk-display-block">

                <a class="uk-form-icon uk-form-icon-flip quantity-action" data-action="quantityPlus"><i class="fas fa-fw fa-plus"></i></a>

                <input type="number" name="quantity" class="uk-input uk-width-1-1" min="1" max="20" value="1" step="1" pattern="\d+" />

                <a class="uk-form-icon quantity-action" data-action="quantityMinus"><i class="fas fa-fw fa-minus"></i></a>

              </div>

            </div>          

            <div>

              <div class="uk-form-label uk-margin-small-bottom">Input with rounded corners</div>

              <div class="uk-inline uk-display-block">

                <a class="uk-form-icon uk-form-icon-flip quantity-action" data-action="quantityPlus"><i class="fas fa-fw fa-plus"></i></a>

                <input type="number" name="quantity" class="uk-input uk-border-rounded uk-width-1-1" min="1" max="20" value="15" step="1" pattern="\d+" />

                <a class="uk-form-icon quantity-action" data-action="quantityMinus"><i class="fas fa-fw fa-minus"></i></a>

              </div>          

            </div>

          </div>

          <!-- End code -->

        </div>

      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>

    </div>

  </div>

</div>

/* Snippets style */

body { background-color: #ebebeb; }

.uk-box-shadow-remove { box-shadow: none; }

.uk-text-mini { font-size: 8px; }

/* style*/

.uk-form-label-required:after {

  content: '*';

  margin-left: 2px;

  color: red;

}

.uk-input {

  border-radius: none;

  -moz-appearance: textfield;

  text-align: center;

}

.uk-form-icon-flip ~ .uk-input {

  padding-right: 45px !important;

  padding-left: 45px !important;  

}

a.quantity-action:hover {

  text-decoration: none;

}

a.quantity-action {

  text-decoration: none;

  border-left: none;

  border-right: 1px solid #e5e5e5;

}

a.quantity-action.uk-form-icon-flip {

  border-right: none;

  border-left: 1px solid #e5e5e5;

}

document.addEventListener('DOMContentLoaded', function () {

quantityPlus(document.querySelectorAll('[data-action="quantityPlus"]'));

quantityMinus(document.querySelectorAll('[data-action="quantityMinus"]'));

  function quantityMinus(quantityMinus) {

    if(typeof(quantityMinus) != 'undefined' && quantityMinus != null) {

      for(var i = 0; i < quantityMinus.length; i++) {

        quantityMinus[i].addEventListener('click', function() {

          var inputField = this.parentElement.parentNode.querySelector('input[type=number]');

          var oldQuantity = parseFloat(inputField.value);

          if (oldQuantity <= inputField.getAttribute('min')) {

            var newQuantity = oldQuantity;

          } else {

            var newQuantity = oldQuantity - 1;

          }

          inputField.value = newQuantity;

          inputField.dispatchEvent(new Event('change'));

        });

      }

    }

  }

​

  function quantityPlus(quantityPlus) {

    if(typeof(quantityPlus) != 'undefined' && quantityPlus != null) {

      for(var i = 0; i < quantityPlus.length; i++) {

        quantityPlus[i].addEventListener('click', function() {

          var inputField = this.parentElement.parentNode.querySelector('input[type=number]');

          var oldQuantity = parseFloat(inputField.value);

          if (oldQuantity >= inputField.getAttribute('max')) {

            var newQuantity = oldQuantity;

          } else {

            var newQuantity = oldQuantity + 1;

          }

          inputField.value = newQuantity;

          inputField.dispatchEvent(new Event('change'));

        });

      }

    }

  }

});