select2.js multiple

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<script src="http://select2.github.io/select2/select2-3.5.2/select2.js"></script>
I am not sure if this is going to work
<br><br><br>
<select multiple id="e1" style="width:300px">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select>
<br>

CSS

li.selected {
    border: 1px solid blue !important;
}

.select2-search-choice {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   -ms-user-select: none;
   user-select: none;
}

JavaScript

$select2 = $("#e1").select2({
    containerCssClass: "test",
    allowClear: true,
    closeOnSelect : false,
});


$select2Container = $('.test');

// should remove selected class
$select2.on('select2-close', function (e) {
    console.log('close');
    $select2Container.find('.selected').removeClass('selected');
})
$select2.on('select2-blur', function (e) {
    console.log('blur');
    $select2Container.find('.selected').removeClass('selected');
})




$select2Container.on('click', 'li', function (e) {
     console.log('click');
     $el = $(e.target)    
    if(!e.ctrlKey){
         $con = $el.closest('.select2-choices');
        clear($con)
    }    
    $el.closest('.select2-search-choice').toggleClass('selected')
    
});

$select2Container.on('copy', function (e) {
    $el = $(e.target).closest('.select2-choices').find('.selected');

    var text = $el.text();

    if (window.clipboardData) {
        window.clipboardData.setData('Text', text);
    } else {
        e.originalEvent.clipboardData.setData('text/plain', text);
    }
    e.preventDefault();
})


function clear(el){
    el.find('.selected').removeClass('selected');
}