Random color only once with templateSelection

#1

I would like to have multiple tags with different colors.

It can be done with

$('#select2Skills').select2({
        tags: true,
        multiple: true,
        allowClear: true,
        placeholder: 'Add a skill, a keyword, a sentence.',
        templateSelection: function(d, container) {
                $(container).css({ "background-color": randomHSL() });            
                return d.text;  
        }
});

but then each time I enter a new tag, all colors for existing tags change.
How do I prevent this ? By adding a attribut “colored” ?

Any help welcomed.
Regards
Patrick

#2

A clear answer has been posted from:

//=====================================================
$('#select2Skills').select2({
        tags: true,
        multiple: true,
        allowClear: true,
        placeholder: 'Add a skill, a keyword, a sentence.',
        templateSelection: function(d, container) {
                var color = $(d).attr('color');
                if (!color) {
                        color = randomHSL(80);
                        $(d).attr('color', color);
                }
                $(container).css({ "background-color": color });
                return d.text;  
        }
});