JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<select  multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'>
	<option value="1">A</option>				     			
	<option value="2">B</option>				     			
	<option value="3">C</option>				     			
	<option value="D">D</option>				     			
</select>

<select  multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'>
	<option value="1">A</option>				     			
	<option value="2">B</option>				     			
	<option value="3">C</option>				     			
	<option value="D">D</option>				     			
</select>

JavaScript

$("#Box1").select2();
$("#Box2").select2();


$("#Box1").on("change", function() {
    $.each($('#Box1').select2('data'), function(i, item) {
       $('#Box2 option[value="'+item.id+'"]').remove();
         });
});