<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<style>
    .ts-wrapper .ts-control, .ts-wrapper .ts-control input {
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
    }
    .ts-dropdown {
        background-color: #ffffff !important;
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll('select').forEach((el) => {
            if (el.tomselect) return;

            new TomSelect(el, {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                sortField: [{
                    field: 'text',
                    direction: 'asc',
                    func: function(a, b) {
                        const numA = parseInt(a.text, 10);
                        const numB = parseInt(b.text, 10);
                        return numA - numB;
                    }
                }]
            });
        });
    });
</script>
