增加或减少多个微调器的值

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);