JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="container">
    <select name="CourseLevelSelector" multiple="multiple">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select>
    <select name="CourseLevelIDs" multiple="multiple">
    
    </select>
</div>

JavaScript

$("#container").on('dblclick', 'select[name="CourseLevelSelector"]', function(e) {
    var ids = $('select[name="CourseLevelIDs"]');
    $(this).find(":selected").each(function() {
        if (!ids.find('[value="' + this.value + '"]').length) {
            $(this).clone().appendTo(ids);
        }
    });
        
})
    

$("#container").on('dblclick', 'select[name="CourseLevelIDs"]', function(e) {
    $(this).find(":selected").remove();
})