jQuery move multi select values from one to another multi select list

Move Option items between two drop down list
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<style>	
	div.content {
		float:left;
		text-align: center;
		margin: 10px;
	}
	span {
		display:block;
		margin:2px 2px;
		padding:4px 10px;
		background:#898989;
		cursor:pointer;
		font-size:12px;
		color:white;
	}       
	</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script>
	$(function () {
		$('#add').click(function () {
			let $options = $('#select1 option:selected');
			$options.appendTo("#select2");
		});
		$('#add_all').click(function () {
			let $options = $('#select1 option');
			$options.appendTo("#select2");
		});
		$('#select1').dblclick(function () {
			let $option = $('option:selected',this);
			$option.appendTo('#select2');
		});
		$("#remove").click(function () {
			let $options = $('#select2 option:selected');
			$options.appendTo("#select1");
		});
		$("#remove_all").click(function () {
			let $options = $('#select2 option');
			$options.appendTo('#select1');
		});
		$('#select2').dblclick(function () {
			let $option = $('option:selected');
			$option.appendTo("#select1");
		});
	});
	</script>
</head>
<body>
<div class="content">
    <select multiple="multiple" id="select1" style="width:100px;height:160px;">
        <option value="1">test1</option>
        <option value="2">test2</option>
        <option value="3">test3</option>
        <option value="4">test4</option>
        <option value="5">test5</option>
        <option value="6">test6</option>
        <option value="7">test7</option>
    </select>
    <div>
        <span id="add">Check add to the right</span>
        <span id="add_all" >Add all to the right</span>
    </div>
</div>

<div class="content">
    <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
        <option value="8">test8</option>
		<option value="9">test9</option>
		<option value="10">test10</option>
		<option value="11">test11</option>		
    </select>
    <div>
        <span id="remove">Remove</span>
        <span id="remove_all">Remove All</span>
    </div>
</div>

</body>
</html>
Most Helpful This Week