$(document).ready(
  function() {
    $('.my-skinnable-select').each(
      function(i) {
        selectContainer = $(this);
        // Remove the class for non JS browsers
        selectContainer.removeClass('my-skinnable-select');
        // Add the class for JS Browers
        selectContainer.addClass('skinned-select');
        // Find the select box
        selectContainer.children().before('<div class="select-text">a</div>').each(
          function() {
            $(this).prev().text(this.options[this.selectedIndex].innerHTML)
          }
        );
        // Store the parent object
        var parentTextObj = selectContainer.children().prev();
        // As we click on the options
        selectContainer.children().click(function() {
          // Set the value of the html
          parentTextObj.text(this.options[this.selectedIndex].innerHTML);
        })        
      }
    );
	//small selectboxes
	$('.small-skinnable-select').each(
		function(i) {
        selectContainer = $(this);
        // Remove the class for non JS browsers
        selectContainer.removeClass('small-skinnable-select');
        // Add the class for JS Browers
        selectContainer.addClass('small-skinned-select');
        // Find the select box
        selectContainer.children().before('<div class="select-text">a</div>').each(
          function() {
            $(this).prev().text(this.options[this.selectedIndex].innerHTML)
          }
        );
        // Store the parent object
        var parentTextObj = selectContainer.children().prev();
        // As we click on the options
        selectContainer.children().click(function() {
          // Set the value of the html
          parentTextObj.text(this.options[this.selectedIndex].innerHTML);
        })        
      }	
	);
	$('.medium-skinnable-select').each(
		function(i) {
        selectContainer = $(this);
        // Remove the class for non JS browsers
        selectContainer.removeClass('medium-skinnable-select');
        // Add the class for JS Browers
        selectContainer.addClass('medium-skinned-select');
        // Find the select box
        selectContainer.children().before('<div class="select-text">a</div>').each(
          function() {
            $(this).prev().text(this.options[this.selectedIndex].innerHTML)
          }
        );
        // Store the parent object
        var parentTextObj = selectContainer.children().prev();
        // As we click on the options
        selectContainer.children().click(function() {
          // Set the value of the html
          parentTextObj.text(this.options[this.selectedIndex].innerHTML);
        })        
      }	
	);
	$('.mid_step2-skinnable-select').each(
		function(i) {
        selectContainer = $(this);
        // Remove the class for non JS browsers
        selectContainer.removeClass('mid_step2-skinnable-select');
        // Add the class for JS Browers
        selectContainer.addClass('mid_step2-skinned-select');
        // Find the select box
        selectContainer.children().before('<div class="select-text">a</div>').each(
          function() {
            $(this).prev().text(this.options[this.selectedIndex].innerHTML)
          }
        );
        // Store the parent object
        var parentTextObj = selectContainer.children().prev();
        // As we click on the options
        selectContainer.children().click(function() {
          // Set the value of the html
          parentTextObj.text(this.options[this.selectedIndex].innerHTML);
        })        
      }	
	);
	$('.mid_step1-skinnable-select').each(
		function(i) {
        selectContainer = $(this);
        // Remove the class for non JS browsers
        selectContainer.removeClass('mid_step1-skinnable-select');
        // Add the class for JS Browers
        selectContainer.addClass('mid_step1-skinned-select');
        // Find the select box
        selectContainer.children().before('<div class="select-text">a</div>').each(
          function() {
            $(this).prev().text(this.options[this.selectedIndex].innerHTML)
          }
        );
        // Store the parent object
        var parentTextObj = selectContainer.children().prev();
        // As we click on the options
        selectContainer.children().click(function() {
          // Set the value of the html
          parentTextObj.text(this.options[this.selectedIndex].innerHTML);
        })        
      }	
	);
	$('.big-skinnable-select').each(
		function(i) {
        selectContainer = $(this);
        // Remove the class for non JS browsers
        selectContainer.removeClass('big-skinnable-select');
        // Add the class for JS Browers
        selectContainer.addClass('big-skinned-select');
        // Find the select box
        selectContainer.children().before('<div class="select-text">a</div>').each(
          function() {
            $(this).prev().text(this.options[this.selectedIndex].innerHTML)
          }
        );
        // Store the parent object
        var parentTextObj = selectContainer.children().prev();
        // As we click on the options
        selectContainer.children().click(function() {
          // Set the value of the html
          parentTextObj.text(this.options[this.selectedIndex].innerHTML);
        })        
      }	
	);
  }
);