Увеличение или уменьшение значений нескольких счетчиков

Question

У меня есть один бланк на моей веб-странице, который работает нормально. Ниже мой код.

<div class="input-group spinner">
    <input type="text" class="form-control" value="0" style="width: 67px; height: 62px; text-align: center; font-size:35px;">
    <div class="input-group-btn-vertical">
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-minus"></span></button>
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus"></span></i></button>
    </div>
  </div>

(function ($) {
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
    var current_val = $('.spinner input').val();
    if(current_val <= 0)
    {
        $('.spinner input').val(0);
    }
  });
})(jQuery); 

Теперь я хочу разместить этот счетчик несколько раз на моей веб-странице. Проблема в том, когда я нажимаю кнопку + или - все значения счетчика увеличиваются или уменьшаются одновременно. How can I do this dynamically? When I click on + / - button of one spinner then only that spinner values should change, others should remain same. Any help would be greatly appreciated.

(function ($) {
  $('.spinner .btn:last-of-type').on('click', function() {
    $(this).parent().find("input").val( parseInt($(this).parent().find("input").val(), 10) + 1);
    //$(this).parent().find("input")
  });
  $('.spinner .btn:first-of-type').on('click', function() {
    $(this).parent().find("input").val( parseInt($(this).parent().find("input").val(), 10) - 1);
    var current_val = $(this).parent().find("input").val();
    if(current_val <= 0)
    {
        $(this).parent().find("input").val(0);
    }
  });
})(jQuery);