Q:

Expecting single values but multivalues

I am sorting an array of alphanumerics entered in an input field by the user and the result is correct.
const sortedNumbers = values.sort(function (a, b){
    if (a > b) {
        return 1;
    } else {
        return -1;
    }
});

Array(3) [ "2a", "2b", "2f" ]

However, when displaying the result in HTML using the script below, I was expecting each alphanumeric in one span
document.querySelector('.pyramid').innerHTML = sortedNumbers.map(val => `<span class="values">${values}</span>`).join('');

The result however is three spans with all three alphanumerics
<span class="values">2a,2b,2f</span><span class="values">2a,2b,2f</span><span class="values">2a,2b,2f</span>

Now I am wondering, can I separate the alphanumerics so that they are each in their own span?

A:

You're using values in your template string instead of val
document.querySelector('.pyramid').innerHTML = sortedNumbers.map(val => `<span class="values">${val}</span>`).join('');

