JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<div style="display:flex">
    <input type="submit" class="DecPercentWidth" value="-">
    <div id="testarea" style="padding-top: 2px; padding-left: 2px; padding-right: 2px;">&nbsp;0&nbsp;</div>
    <input type="submit" class="IncPercentWidth" value="+">
</div>

JavaScript

//Incrementar e decrementar um valor sem largar o botão
var i = 0;

if (!$.fn.autoClick)
{
    $.fn.autoClick = function(executor, initialTimeout, secondTimeout)
    {
        var executorWrapper = function()
        {
            executor();
            if (typeof loopthis !== 'undefined')
                loopthis = setTimeout( executorWrapper, secondTimeout);
        }

        this.mousedown(function ()
        {
            if (typeof loopthis !== 'undefined')
            {
                clearTimeout(loopthis);
                loopthis=undefined;
            }
            executor();
            loopthis = setTimeout(executorWrapper, initialTimeout);

        }).mouseup(function () 
        {
            if (typeof loopthis !== 'undefined')
                clearTimeout(loopthis);

        }).mouseleave(function ()
        {
            if (typeof loopthis !== 'undefined')
                clearTimeout(loopthis);
        });
    };
}

$(".IncPercentWidth").autoClick(function()
                                {
                                    console.log('increase '+i);
                                    i = i + 1;
                                    $("#testarea").text(i);
                                }, 
                                500, 
                                70);

$(".DecPercentWidth").autoClick(function()
                                {
                                    console.log('decrease '+i);
                                    i = i - 1;
                                    $("#testarea").text(i);
                                }, 
                                500, 
                                70);