JSFiddle - React, Tailwind, and code Playground

HTML

<select id="car_make" class="car_options" name="car_make">
    <option value="">By Make</option>
    <option value="Vauxhall">Vauxhall</option>
    <option value="BMW">BMW</option>
    <option value="Toyota">Toyota</option>
    <option value="Lexus">Lexus</option>
    <option value="Audi">Audi</option>
    <option value="Ford">Ford</option>
</select>
<br/>
<select  class="car_options name="car_color" id="car_color"">
    <option value="">By Color</option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Black">Black</option>
    <option value="Grey">Grey</option>
</select>

JavaScript

function sortlist() {
        var elements = document.getElementsByClassName('car_options');
        for (var j = 0; j < elements.length; j++) {
            var cl = elements[j];
            var clTexts = new Array();

            for (i = 1; i < cl.options.length; i++) {
                clTexts[i - 1] = cl.options[i].text.toUpperCase() + "," + cl.options[i].text + "," + cl.options[i].value;
            }
            clTexts.sort();

            for (i = 1; i < cl.options.length; i++) {
                var parts = clTexts[i - 1].split(',');
                cl.options[i].text = parts[1];
                cl.options[i].value = parts[2];
            }
        }
    }
    sortlist();