Increase/decrease value of input integer fieldset with buttons/inputs using Jquery/js

Question

I need to have a series of inputs, with a preset value, each a different integer, and have 1 button that when pressed increases(and another button that decreases) these input values by a preset amount. Say I have inputs of values 10, 20, 30, and then I can increase these values by pressing on a button, say of value 10, so that these input values are updated simultaneously to being 20, 30, 40. I researched about 5-6 previous answers that describe something very similar, but too often "Id" is used whereas I need to reference a class of inputs. One of the codes found here that semi-works is in the following, culled from an answer several years back. HTML:

<input name="qty" id="qty" type="text" value="10" size="3" >
 <input name="qty" id="qty1" type="text" value="20" size="3" >
 <input type="button" id="qtyplus" value="+" onclick="return false">
 <input type="button" id="qtyminus" value="HELLO" onclick="return  false">

Jquery:

 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script>jQuery(function(){
 jQuery("#qtyplus").click(function(){     
 jQuery(":text[name='qty']").val(     Number(jQuery(":text[name='qty']").val()) + 1 );
 });
 jQuery("#qtyminus").click(function(){
  if(jQuery('#qty').val()>1)
  jQuery(":text[name='qty']").val(    Number(jQuery(":text[name='qty']").val()) - 1 );

});
});

There's also a previously authored jfiddle from another posting that I can't make to work for my purposes.

Answer 1

JS Fiddle Demo

HTML:

 <form method="post" action="">
  <div class="controls">

    <div>
      <label for="name">Item One</label>
      <input type="text" name="french-hens" id="french-hens" value="10">
    </div>
    <div>
      <label for="name">Item Two</label>
      <input type="text" name="turtle-doves" id="turtle-doves" value="20">
    </div>
    <div>
      <label for="name">Item Three</label>
      <input type="text" name="partridge" id="partridge" value="30">
    </div>

  </div>
  <div class="inc button">+</div>
  <div class="dec button">-</div>
  <input type="submit" value="Submit" id="submit">
</form>

CSS:

#page-wrap {
  width: 500px;
  margin: 100px auto;
}

h1 {
  font: 26px Georgia, Serif;
  margin: 0 0 10px 0;
}

form {
  margin: 50px 0 0 0;
}

label {
  font: bold 20px Helvetica, sans-serif;
  display: block;
  float: left;
  text-align: right;
  padding: 5px 10px 0 0;
  width: 140px;
}

input[type=text] {
  float: left;
  width: 40px;
  font: bold 20px Helvetica, sans-serif;
  padding: 3px 0 0 0;
  text-align: center;
}

form div {
  overflow: hidden;
  margin: 0 0 5px 0;
}


.dec {
  background-position: 0 -29px;
}

.buttons {
  padding: 20px 0 0 140px;
}

.button{
  cursor: pointer;
}

JS:

 $(function() {

  $(".button").on("click", function() {

    var $button = $(this);

    $(".controls input").each(function() {
      console.log($(this));
      var oldValue = $(this).val();

      if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 10; //custom-preset value enter here
      } else {
        // Don't allow decrementing below zero
        if (oldValue > 0) {
          var newVal = parseFloat(oldValue) - 10; //custom-preset value enter here
        } else {
          newVal = 0;
        }
      }

      $(this).val(newVal);

    });
  });
});