title: Change input number by step on button click
body: <p>I have the following code in my <code>functions.php</code> file, however the script does not seem to be doing what it is intended to do.</p>
  
  <p>My plus and minus buttons have classes <code>.plus</code> and my <code>.minus</code> respectively.</p>
  
  <p>PHP / JQuery :</p>
  
  <pre><code>/*
      ========================================
      Change qty by step on button click
      ========================================
  */
  function kia_add_script_to_footer(){ ?&gt;
  
      &lt;script&gt;
  
      jQuery(document).ready(function(){
  
          jQuery(document).on('click', '.plus', function(e) { // replace '.quantity' with document (without single quote)
  
              $input = jQuery(this).siblings('.quantity .qty');
  
              var val = parseInt($input.val());
              var step = $input.attr('step');
  
              step = 'undefined' !== typeof(step) ? parseInt(step) : 0.5;
  
              $input.val( val + step ).change();
          });
          jQuery(document).on('click', '.minus',  // replace '.quantity' with document (without single quote)
  
              function(e) {
  
              $input = jQuery(this).siblings('.quantity .qty');
  
              var val = parseInt($input.val());
              var step = $input.attr('step');
  
              step = 'undefined' !== typeof(step) ? parseInt(step) : 0.5;
  
              if (val &gt; 0) {
                  $input.val( val - step ).change();
              };
          });
  
       });
  
      &lt;/script&gt;
  
  &lt;?php };
  
  add_action( 'wp_footer', 'kia_add_script_to_footer' );
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>EDIT: Apologies for the bland question. I have erased the generic input arrows for <code>input.qty</code> and added two buttons (<code>.minus</code> and <code>.plus</code>). What is meant to happen, is that on click of either <code>.minus</code> or <code>.plus</code>, the <code>input.qty</code> number should decrease or increase by <code>var step</code> amount.</p>
  
  <p>As for the question of whether <code>.qty</code> is nested inside of <code>.quantity</code>, that would be correct. I was not sure if maybe <code>.qty</code> was being used elsewhere, so to confirm my coding was correct, I added the parent element's class.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="quantity"&gt;
          &lt;input class="minus" value="-" type="button"&gt;
          &lt;input class="input-text qty text" step="0.5" min="0.5" max="10" name="quantity" value="0" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number"&gt;
          &lt;input class="plus" value="+" type="button"&gt;
          &lt;span&gt;press - or + to add/remove meterage per half meter&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>