JSFiddle - React, Tailwind, and code Playground

HTML

<select id="edit-attributes-1" class="form-select required" name="attributes[1]">
<option selected="selected" value="">Please select</option>
<option value="62">3XS</option>
<option value="62">2XL</option>
<option value="66">2XS</option>
<option value="63">3XL</option>
<option value="11">L</option>
<option value="10">M</option>
<option value="8">S</option>
<option value="14">XL</option>
<option value="12">XS</option>
</select>

JavaScript

/**
 * Convert a size string to a numeric value.
 *
 * A size string is one of the letters S, M or L (small, medium or large)
 * optionally preceded by an X, or a number and an X.
 *
 * This function will return NaN if the input is invalid and is not
 * case-sensitive. The result may be zero or negative.
 */
function sizeValue(size) {
    var sizes = { S: -1, M: 0, L: 1 },
        value = sizes[size[size.length - 1].toUpperCase()];

    if (typeof value == 'undefined') {
        return NaN;
    }

    if (size.length > 2) {
        // Assume strings of at least 3 characters macth /\d+X[SML]/
        value *= parseInt(size.substr(0, size.length - 2), 10) + 1;
    }
    else if (size.length > 1) {
        // Assume two letter strings match /X[SML]/
        value *= 2;
    }

    return value;
}

// Now use the sizeValue function to sort the option elements.
var options = $('#edit-attributes-1 option').get();
options.sort(function(a, b) {
    // I'd prefer to use Node.textContent here, but this is compatible with
    // elderly versions of IE.
    a = $(a).text();
    b = $(b).text();

    return sizeValue(a) - sizeValue(b);
});

// Reinsert the option elements in the select in their new order.
$('#edit-attributes-1').append(options);