JSFiddle - React, Tailwind, and code Playground

HTML

<select id="user_department_id" name="user[department_id]">

 <option value=""> </option>

 <!-- <option value="9">AAAAA</option>
 <option value="11">BBBBB</option>
 <option value="10">G</option>
 <option value="12">Z</option> -->

 <option value="">--</option>
 <option value="add">Add a New</option>
</select>

JavaScript

$(function() {
    var data = { id: 123, text: "New Item!" };
    
    var topOptions = '<option value=""> </option>';
    
    var options = [{
        val: 9,
        text: "AAAAA"},
    {
        val: 11,
        text: "BBBBB"},
    {
        val: 10,
        text: "G"},
    {
        val: 12,
        text: "Z"}];
    
    var bottomOptions = '<option value="">--</option><option value="add">Add a New</option>';

    function populateOptions(element, options) {
        options = options.sort(function(a, b) {
            return a.text.toLowerCase() > b.text.toLowerCase();
        });

        $(element).html('').append(topOptions);
        for (var i = 0; i < options.length; i++) {
            $('<option>').attr("value", options[i].val).text(options[i].text).appendTo($(element));
        }
        $(element).append(bottomOptions);
    }

    populateOptions('#user_department_id', options);

    $('#user_department_id').on('change', function() {
        if ($(this).val() == "add") {
            options.push({val: data.id, text: data.text});
            populateOptions(this, options);
            $(this).val(data.id);
        }
    });

});