How do I make a multiple select have an X at the end of each option to erase it?

Question

I wanna make a select multiple list have an X to the right of each option and when I click it it should remove it from the list. I think this would be a mixture of jQuery to delete itself and CSS to add the X at the end of the option.

I'm already using this javascript function:

    function addToList(list,firstOpt, secOpt,number){
        var y = document.createElement('option');
        var one = document.getElementById(firstOpt);
        var two = document.getElementById(secOpt);
        if(number==1)
        {
        var oneValue = one.value;
        var twoValue = two.value;
        }
        else{
        var firstIndex = one.selectedIndex;
        var secondIndex = two.selectedIndex;
        var oneValue = one.options[firstIndex].text;
        var twoValue =two.options[secondIndex].text;
        }
        y.text = twoValue+'-'+oneValue;
        y.value = twoValue+'-'+oneValue;
        var elSel = document.getElementById(list);
        try {
        elSel.add(y, null);
        }
        catch(ex) {
        elSel.add(y);
        }
    }

Any help is greatly appreciated!

Thanks!!