title: jquery - multiple buttons with respective value incrementing on click
body: <p>I have a range of input buttons, each with its own value. </p>
  
  <pre><code>&lt;ul class="sizeDriller"&gt;
    &lt;li&gt;&lt;input type="button" value="S" class="sizeInput" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;input type="button" value="M" class="sizeInput" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;input type="button" value="L" class="sizeInput" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;input type="button" value="XL" class="sizeInput" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If I click on one of the buttons, I want to attach a qty of "1" per click to the respective button, so the first button value should go "S/1", then "S/2", then "S/3" and so on.</p>
  
  <p>My script is not really working:</p>
  
  <pre><code>var incr = 0;
  $('.sizeInput').bind('click', function()
    {
    var initial = $(this).val();
    var init = parseInt(incr);
    var counter = init+1;
    $(this).attr('value',initial+'/'+counter);
    });
  }
  </code></pre>
  
  <p>I think I need some kind of loop, but I am not getting anywhere... </p>
  
  <p>Thanks for help!</p>
  
  <p>========================================================
  Reset button:</p>
  
  <pre><code>&lt;a href="#" class="resetSize"&gt;Reset/a&gt;
  </code></pre>
  
  <p>Reset function:</p>
  
  <pre><code>$('.resetSize').bind('click', function()
    {
    $('.sizeInput').each(function(e)
      {
      var current = $(this).val().split("/")[0];
      $(this).attr('value',current);               
    });
  });
  </code></pre>