JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
    <select id="select1">
        <option disabled="disabled" selected="selected">Select an Option</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
    </select>
    <div>
        <label>Selection: </label>
        <label id="lbl1"></label>
    </div>
</div>
<div id="div2">
    <div><a class="btn" id="btnAdd">Add</a></div>
    <div><a class="btn" id="btnRemove">Remove</a></div>
</div>
<div id="div3">
    <select id="select2" multiple="multiple">
        
    </select>
</div>

CSS

body { padding: 20px 0 0 20px; }
#div1 { float: left; width: 35%; }
#div2 { float: left; width: 20%; }
#div3 { float: left; width: 45%; }
#select1 { margin-bottom: 20px; }
#select2 { width: 150px; }
.btn {
	-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background-color: #ededed;
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
	text-indent: 0;
    margin-top: 5px;
    padding-top: 2px;
    cursor: pointer;
	border: 1px solid #dcdcdc;
	display: inline-block;
	color: #777777;
	font-weight: bold;
	font-style: normal;
	height: 25px;
    width: 70px;
	text-decoration: none;
	text-align: center;
	text-shadow: 1px 1px 0px #ffffff;
}
.btn:hover {
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background-color: #dfdfdf;
}.btn:active {
	position: relative;
	top: 1px;
}

JavaScript

$(function() {
    $('#select1').change(function() {
        $('#lbl1').html($(this).val());
    });
    
    $('#btnAdd').click(function() {
        var txt = $('#lbl1').html();
        if (txt == "") {
            alert('Select an option');
            return;
        } else {
            if ($('#lbl1').html() != "") {
               var optionText=$('#lbl1').html();
               var alreadyExists=false;
                $('#select2>option').each(function(i,option){
                    console.log(option);
                    if(option.innerHTML==optionText){
                        alreadyExists = true;
                        return false;
                    }
                });             
                if(alreadyExists){
                    alert('Option already exists.');
                }else{
                    $('#select2').prepend('<option>'+optionText+'</option>');
                }
            }
        }
    });
    
    $('#btnRemove').click(function() {
        $('#select2 > option:selected').each(function() {
            $(this).remove();
        });
    });
});