问按照1-9和a-z显示数组的顺序

EN

 function newOrder() {
    var oldOrder = values;
    values.sort();
    document.getElementByClassName('.values').innerHTML = values;
  }

$(document).ready(function() {
  //Add Block Functionality
  let values = [];

  $('#add-block .button').click(function() {
    //determin widht of last div
    var lastwidth = $('.pyramid li:last-child .item').width();

    //calculation of next div
    if (lastwidth == null) {
      var plus = 90;
    } else {
      var plus = lastwidth + 190; //not sure why 190 but with this value they line up smoothly. Was expecting 0 and 100 for the values.
    }

    //create radom number
    var number = Math.floor(Math.random() * 9) + 1;

    //create radom letter
    function randLetter() {
      var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
      var letter = letters[Math.floor(Math.random() * letters.length)];

      return letter
    }

    //make letter available globally
    var resultLetter = randLetter();

    //create radom color
    function randColor() {
      var colors = ["green", "yellowgreen", "Chocolate", "goldenrod", "cadetblue", "firebrick", "magenta", "LightSeaGreen", "Peru", "Sienna", "SlateBlue", "Snow", "Tan", "Skyblue"];
      var color = colors[Math.floor(Math.random() * colors.length)];

      return color
    }

    //make color available gloabally
    var resultColor = randColor();
    var $block = $('<li><div class="item" style="width:' + plus + 'px; border-bottom: 60px solid ' + resultColor + ' ;"><input class="values" type="text" placeholder=" ' + number + resultLetter + ' " maxlength="2"> </div></li>');

    $('.pyramid').append($block);

    //save values

    values.push(number + resultLetter);
    values.sort();
    console.log(values);
});

  //Remove Block Functionality
  $('#remove-block .button').click(function() {
    value = $(".values", $('.pyramid li').last()).attr("placeholder").trim()//find last value added in pyramid//.attr()value of attribute placeholder,trim() is just for white space
    values.splice(values.indexOf(value), 1)//indexOf() method returns the position of the first occurrence of a specified value in a string. In this case it is the index of value, which is the last item in the array. Could be replaced by -1 I think
    console.log(values)
    $('.pyramid li').last().remove();
  })
});

body, html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  background-color: #101935;

}
*, *:before, *:after {
  box-sizing: inherit;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li div.item {
  margin: 0 auto;
  position: relative;
  height: 0px;
  width:  100px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 60px solid #0488e0;
  display: flex;
  justify-content: center;
}

  li div.item:not(.item0){
  border-bottom: 60px solid #0488e0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  margin-top: 10px;
  height: 0;
}

.values {
  background: rgba(255, 255, 255, .6);
  border: none;
  text-align: center;
  font-size: 15px;
  color: black;
  font-weight: bold;
  height: 20px;
  width: 35px;
  border-radius: 2px;
  position: absolute;
  top: 30px;
}

.values:focus {
background: rgba(255, 255, 255, .95);
box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
outline: none;
}

/*buttons section */
.buttons, #add-block, #remove-block{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
#add-block span, #remove-block span {
  background-color: #edf7f6;
  padding: 5px 15px ;
  font-size: 18px;
  border-radius: 2px;
  color:#888;
  font-weight: 400;

}
#add-block .button, #remove-block .button{
  background-color: #0488e0;
  padding: 5px;
  border-radius: 2px;
  width: 40px;
  text-align: center;
  display: block;
  font-size: 20px;
  color: #ffffff;
  margin: 10px;
  transition: background-color 250ms ease-in-out 100ms;
}

#add-block .button:hover, #remove-block .button:hover{
  background-color: #059BFF;
  cursor: pointer;
}

  <body>

    <ul class="pyramid">
    </ul>

    <section class="buttons">
      <div id="add-block">
        <span>Add Block</span>
        <div class="button">+
        </div>
      </div>
      <div id="remove-block">
        <span>Remove Block</span>
        <div class="button">-
        </div>
      </div>
    </section>


  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="resources/js/main.js"></script>

  </body>