How to handle added options with multilineSelectmenu (jQuery UI Widget)

I want to use a jquery widget extension of multilineSelectmenu (https://github.com/ainterpreting/jquery-multilineSelectmenu). However, After opening the select box even once, new options (added by clicking the button "add item") are not been appeared in the box. Here is an example. And the following is the content of multilineSelectmenu

/* this is the custom selectmenu widget extension add multiline and css theming support */
var multilineSelectmenu = $.widget("ui.multilineSelectmenu", $.ui.selectmenu, {
    _setText: function (element, value) {
        if (value) {
            if (value.indexOf('|') !== -1) {
                var lines = value.split('|');
                value = '<span class="ui-selectmenu-menu-item-header">' + lines[0].trim() + '</span>';
                for (var i = 1; i < lines.length; i++) {
                    value = value + '<span class="ui-selectmenu-menu-item-content">' + lines[i].trim() + '</span>';
                }
            }
            element.html(value);
        } else {
            element.html("&#160;");
        }
    }
});

I search this problem several hours, but because I don't know much about jquery-ui and its widget, I could not settle by myself. Please help! Thanks in advance.

Try to destroy and recreate widget after adding new option/options:

$('#button').click(function(){
        $('#select').append($('<option>').html('new| option'));
        $("#select").multilineSelectmenu('destroy');
        $("#select").multilineSelectmenu();  
 })

See here for example