JSFiddle - React, Tailwind, and code Playground

HTML

<p><button>Add input</button></p>

CSS

input { padding: 5px; font-size: 20px; }

JavaScript

/*
 * smart-number-inputs.js
 * 
 * Increment/decrement number values in text inputs using up and down arrow keys.
 * 
 * Author: Martti Laine (@codeclown)
 * License: MIT
 * URL: https://github.com/codeclown/smart-number-inputs
 */
"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};!function(e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"object"===("undefined"==typeof module?"undefined":_typeof(module))?module.exports=e():"function"==typeof define&&define.amd?define(e):window.smartNumberInputs=e()}(function(){var e=function(e){return"[object Array]"===Object.prototype.toString.call(e)},t=function(e,t,n){return e.addEventListener(t,n)},n=38,o=40,r=/(\s+)/,i=function(e){if(e.which===n||e.which===o){e.preventDefault();var t=e.currentTarget,r=t.value,i=t.selectionStart,f=t.selectionEnd,u=e.which===n?1:-1;e.shiftKey&&(u*=10);var c=l(r,i,f,u);t.value=c.value,t.setSelectionRange(c.start,c.end)}},f=function u(n){return e(n)?n.forEach(u):n instanceof NodeList?Array.prototype.forEach.call(n,u):void t(n,"keydown",i,!1)},l=function(e,t,n,o){for(var i,f=e.toString().split(r),l=null,u=null,c=0,a=0,d=f.length;d>a;a++)if(i=f[a],c+=i.length,!i.match(r)&&(c>=t&&(null===l&&(l=c-i.length),f[a]=i.replace(/\-?[0-9]+/,parseInt(i.replace(/^.*?(\-?[0-9]+).*/,"$1"),10)+o)),c-=i.length-f[a].length,n-=i.length-f[a].length,c>=n)){u=c;break}return{value:f.join(""),start:l,end:u}};return{eventHandler:i,enable:f,modify:l}});


$(document).on('keydown', 'input', smartNumberInputs.eventHandler);

$('button').on('click', function(event) {
	$('body').append('<p><input type="text" id="input" value="20px 5 0 test -20px"></p>');
});