$(document).ready(
  function() {
    registerSkinnableSelect(".my-skinnable-select-01", "my-skinnable-select-01", "skinned-select-01", "select-text-01");
    registerSkinnableSelect(".my-skinnable-select-02", "my-skinnable-select-02", "skinned-select-02", "select-text-02");
    registerSkinnableSelect(".my-skinnable-select-03", "my-skinnable-select-03", "skinned-select-03", "select-text-03");
    registerSkinnableSelect(".my-skinnable-select-04", "my-skinnable-select-04", "skinned-select-04", "select-text-04");
  }
);
  
function registerSkinnableSelect(selector, cssRemove, cssAdd, cssText) {
      $(selector).each(
      function(i) {
          selectContainer = $(this);
          // Remove the class for non JS browsers
          selectContainer.removeClass(cssRemove);
          // Add the class for JS Browers
          selectContainer.addClass(cssAdd);
          // Find the select box
          selectContainer.children().before('<div class="' + cssText + '"></div>').each(
          function() {
              if (this.selectedIndex != "undefined" && this.selectedIndex >= 0) {
                  $(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().change(function() {
              // Set the value of the html
              if (this.selectedIndex != "undefined" && this.selectedIndex >= 0) {
                  parentTextObj.text(this.options[this.selectedIndex].innerHTML);
              }
          })
      }
    );
  }