<div class="quantity">
  
  <input type="number" id="id644" name="quantity" value="1" title="Кол-во" size="4" min="1" max="" step="1" inputmode="numeric" autocomplete="off">
  
</div>
function transformNumberBtn() {
  let boxQuantity = document.querySelector('.quantity');
  let numInit = document.querySelector('.quantity > input');
  let i = 1;
  
  let btnBoxInit = document.createElement("div");
  let btnBox = `
      <div class="btnBox">
        <button class="btn_plus">+</button>
        <span class="btn_result">1</span>
        <button class="btn_minus">-</button>
      </div>
    `;
  btnBoxInit.innerHTML = btnBox;
  boxQuantity.appendChild(btnBoxInit);
  
  let btnPlus = document.querySelector('.btn_plus');
  let btnResult = document.querySelector('.btn_result');
  let btnMinus = document.querySelector('.btn_minus');

  btnPlus.addEventListener('click', () => {
    numInit.value = ++i;
    btnResult.innerHTML = numInit.value;     
  })
  
  btnMinus.addEventListener('click', () => {
    numInit.value = --i; 
    btnResult.innerHTML = numInit.value;
  })
  
}
transformNumberBtn();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.