Radio button list using Javascript with each list choice returning custom text

I am making a custom TinyMCE button for WordPress, part of the Javascript code looks like this:

(function() {
    tinymce.create('tinymce.plugins.Green', {
        init : function(ed, url) {
            ed.addButton('green', {
                title : 'Prompt Text',
                image : url+'/images/btn_green.jpg',
                onclick : function() {                    
                    var prompt_text = prompt("Green Button", "Green Button Text");
                    var caret = "caret_pos_holder";
                    var insert = "<div>" + prompt_text + "</div><span id="+caret+"></span>";
                    if (prompt_text != null && prompt_text != 'undefined')
                    {
                        ed.execCommand('mceInsertContent', false, insert);
                        ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                        ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                    }
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('green', tinymce.plugins.Green);
})();

I want to remove the prompt_text function and add a radio button list where a window appears and the user can select one of the options in the list. And each list item should have their unique insert. How is this possible?

For instance, the window should have a list of three options: Tea, Coffee, Water.

If the user selects Coffee, it should insert the text: Coffee wakes you up.

My knowledge of Javascript is very limited which is stopping me from solving this. However, I would presume that this is only possible by creating a jQuery form?