increase/decrease by 1

HTML

<!--quantity-->
<div style="margin-bottom:2em;text-align:center;">

  <div class="change_qty minus cursor_hover">&#45;</div>
  
  <input type="numeric" style="height:-22px;width:40px; margin:0 .5em;text-align:center;" value="1">
  
  <div class="change_qty plus cursor_hover">&#43;</div>

</div>

CSS

.change_qty{
    display:inline-block;
    color:#fff;
    background:#2e748e;
    width:22px;
    height:22px;
    border-radius:50%;
    font-weight:900;
    line-height:22px;
    float:right;
}
.cursor_hover{
    cursor: hand;
    cursor: pointer;
}

JavaScript

$(function(){
$(".plus").click(function(e) {
  e.preventDefault();
  var $this = $(this);
  var $input = $this.siblings('input');
  var value = parseInt($input.val());

  if (value < 30) {
    value = value + 1;
  } 
  else {
    value =30;
  }

  $input.val(value);
});

$(".minus").click(function(e) {
  e.preventDefault();
  var $this = $(this);
  var $input = $this.siblings('input');
  var value = parseInt($input.val());

  if (value > 1) {
    value = value - 1;
  } 
  else {
    value =1;
  }

  $input.val(value);
});
});