(function($) {
$(document).ready(function(){

  $('.field-name-field-add-to-cart').append('<div class="size-selector"><div class="s size">S</div><div class="m size">M</div><div class="l size">L</div><div class="xl size">XL</div><div class="xxl size">XXL</div></div>');

  $('#edit-attributes-field-size option').each(function(){
    Elemclass = '.field-name-field-add-to-cart' + ' ' + '.' + $(this).val().toLowerCase();
    $(Elemclass).addClass('available');
  });

  $('.size-selector .size').click(function(){
    clicked = $(this);
    selectedSize = $(clicked).text().toUpperCase();
    if($(this).hasClass('available')) {
      $('.size-selector .size').each(function(){
        $(this).removeClass('selected');
      });

      $(this).addClass('selected');
      $('.form-select').find('option:contains("' + selectedSize +'")').change()
    }
  });
});
})(jQuery);