JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sizeDriller">
http://jsfiddle.net/roberkules/xVeL8/#fork    <li><input type="button" value="S" /><input type="hidden" name="sizeS" value="0" /></li>
    <li><input type="button" value="M" /><input type="hidden" name="sizeM" value="0" /></li>
    <li><input type="button" value="L" /><input type="hidden" name="sizeL" value="0" /></li>
    <li><input type="button" value="XL" /><input type="hidden" name="sizeXL" value="0" /></li>
</ul>

CSS

.sizeDriller input { width: 50px; }

JavaScript

$('.sizeDriller input[type="button"]').bind('click', function(e) {
    var type = $(this).val().split("/")[0];
    var counter = $("input[name='size"+type+"']");
    
    var newcount = parseInt(counter.val())+1;
    if (newcount > 5) {
        newcount = 0;
    }
    
    counter.val(newcount);
    $(this).val(type + (newcount > 0 ? ("/" + newcount) : ""));
});