Cacher is the code snippet organizer for pro developers

.selector {
  position: fixed;
  top: 200px;
  left: 0;
  background-color: #ddd;
  z-index: 100000000;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  ul {
    padding: 0;
    margin: 0;
    li {
      padding: 10px 0;
      cursor: pointer;
      span {
        /* width: 30px; */
        padding: 10px;
        border-bottom: 1px solid #000;

        //margin: 3px;
      }
    }
  }
}

SelStyle();


function SelStyle(){
  var styles = [1,2,3,4,5];
  $('body').append('<div class="selector"><ul></ul></div>');
  $('.selector ul').html('');
  styles.forEach(function(index){
    $('.selector ul').append('<li><span>'+index+'</span></li>');
    $('.selector > ul > li:nth-child('+index+')').click(function(){
      changeCSS('change'+index+'.css', 0);

    });

  });
}


function changeCSS(cssFile, cssLinkIndex) {

  var oldlink = document.getElementById("gac-style-change-css");

  var newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("id", "gac-style-change-css");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", "/wp-content/themes/mec/assets/css/"+cssFile);

  document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}