Grouping similar jQuery functions I want to group the two very similar jQuery functions into just one. Any idea?

HTML:

&lt;input id="progress" type="text" class="spinner-input form-control" maxlength="3" readonly value="&lt;?php echo $progreso['progress'] ?&gt;"&gt;
&lt;div class="spinner-buttons input-group-btn btn-group-vertical"&gt;                   
    &lt;button id="plus" type="button" class="btn spinner-up btn-xs btn-info"&gt;                       
        &lt;i class="icon-angle-up"&gt;&lt;/i&gt;                    
    &lt;/button&gt;                     
    &lt;button id="minus" type="button" class="btn spinner-down btn-xs btn-info"&gt;                        
        &lt;i class="icon-angle-down"&gt;&lt;/i&gt;                     
    &lt;/button&gt;                  
&lt;/div&gt;


jQuery:

$(document).on('click', '#plus', function(e){
    var progress = parseInt( $('#progress').val() ) + 5;
    if ( progress &lt;= 100 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 100 );  
    };
});

$(document).on('click', '#minus', function(e){
    var progress = parseInt( $('#progress').val() ) - 5;
    if ( progress &gt;= 0 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 0 );    
    };
});
First step would be to extract a function that updates the input:

function modifyProgress(delta) {
  var element = $('#progress');
  var progress = +element.val() + delta;
  element.val( isNaN(progress) ? 0 : progress &lt; 0 ? 0 : progress &gt; 100 ? 100 : progress;
);
}


BTW, never ever use parseInt with out its second parameter (radix). Some browsers interpret numbers starting with a leading 0 (zero) as octal, so that an input of "09" throws an error and "010" to returns 8. Better is to use the unary plus operator.

This simplifies the event handler:

$(document).on('click', '#plus, #minus', function(e){
   modifyProgress(5 * (this.id === "plus" ? 1 : -1));
})


EDIT: You should consider storing your progress value somewhere other inside the input such as a data model (see MVC). Keeping data/logic separate from the GUI is always a good thing. It also avoids needing to re-parse the number every time. And you can "hide" the checking of overflow or underflow inside the model.