Question

I have a range of input buttons, each with its own value.

<ul class="sizeDriller">
  <li><input type="button" value="S" class="sizeInput" /></li>
  <li><input type="button" value="M" class="sizeInput" /></li>
  <li><input type="button" value="L" class="sizeInput" /></li>
  <li><input type="button" value="XL" class="sizeInput" /></li>
</ul>

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.

My script is not really working:

var incr = 0;
$('.sizeInput').bind('click', function()
  {
  var initial = $(this).val();
  var init = parseInt(incr);
  var counter = init+1;
  $(this).attr('value',initial+'/'+counter);
  });
}

I think I need some kind of loop, but I am not getting anywhere…

Thanks for help!

========================================================
Reset button:

<a href="#" class="resetSize">Reset/a>

Reset function:

$('.resetSize').bind('click', function()
  {
  $('.sizeInput').each(function(e)
    {
    var current = $(this).val().split("/")[0];
    $(this).attr('value',current);               
  });
});

Answer 1

You could use data() to store the counter:

$('.sizeInput').bind('click', function(){
  var initial = $(this).val();
      if(typeof $(this).data('counter') == "undefined"){
          $(this).data('counter',1); 
      }else{
          $(this).data('counter',$(this).data('counter')+1);
          initial = initial.substr(0,initial.indexOf('/'));
      }

   $(this).val(initial+'/'+$(this).data('counter'));
});

example: http://jsfiddle.net/niklasvh/etjYL/