Add arrow buttons to woocommerce quantity input elements

quantity-arrows.css

div.quantity {
  position: relative;
  margin: 0 0 1rem;
}
div.quantity div.arrows {
  padding: 1px 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 0;
  height: 100%;
  justify-content: space-between;
  border-left: 1px solid rgba(51, 51, 51, 0.25);
}
div.quantity div.arrows > i {
  padding: 0 5px;
  color: rgba(51, 51, 51, 0.75);
  cursor: pointer;
}
div.quantity div.arrows > i:focus, div.quantity div.arrows > i:active {
  color: #333333;
}
div.quantity div.arrows .arrow-divider {
  height: 1px;
  background: rgba(51, 51, 51, 0.25);
}
div.quantity input[type=number] {
  margin: 0;
  padding-right: 24px;
  padding-left: 0;
  text-align: center;
}
div.quantity input[type=number]::-webkit-inner-spin-button, div.quantity input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

quantity-arrows.js

// Uses fontawesome for the rendering of the arrows

window.onload = (function(){
    inputs = document.querySelectorAll('.quantity > input[type=number]');

    inputs.forEach(function(value) {
        arrows = createArrows();
        value.parentNode.insertBefore(arrows, value);
    });
});

function createArrows() {
    arrowPlus = document.createElement("i");
    arrowPlus.className = 'fa fa-caret-up';
    arrowPlus.addEventListener('click', function(e) {
        input = e.target.parentNode.parentNode.querySelector('input[type=number]');
        newValue = parseInt(input.value)+1;
        input.value = newValue;
    });

    arrowMin = document.createElement("i");
    arrowMin.className = 'fa fa-caret-down';
    arrowMin.addEventListener('click', function(e) {
        input = e.target.parentNode.parentNode.querySelector('input[type=number]');
        newValue = parseInt(input.value)-1;
        if (newValue !== 0) {
            input.value = newValue;
        }
    });

    divider = document.createElement('span');
    divider.className = 'arrow-divider';

    arrows = document.createElement("div");
    arrows.className = 'arrows';
    arrows.appendChild(arrowPlus);
    arrows.appendChild(divider);
    arrows.appendChild(arrowMin);

    return arrows;
}

Question, for some reason it does change the qty number but doesn't update the cart. Do you know how to do this? I have been trying to figure it out, but just can't swing it.

The way I've done this before is by triggering a click event on Woocommerce's update_cart button. You would want add a line after the input.value = newValue; part like below:

let updateCartButton = document.querySelector('[name="update_cart"]');
updateCartButton.removeAttribute('disabled');
updateCartButton.click();