JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ivaynberg.github.io/select2/select2-3.4.5/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.4.5/select2.css">
<select multiple class="multiselect" id="first">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select multiple class="multiselect" id="other">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
CSS
.multiselect {
width: 200px;
}
JavaScript
$('select.multiselect').select2();
$('select.multiselect').on('change', function(e) {
// the selected values
var vals = $(this).select2("val");
// selects contains all the OTHER select forms
var selects = $('select').not('#'+$(this).attr('id'));
// loop trough all the selects
for (var i=0; i<selects.length; i++) {
//re-enable all options before
$(selects[i]).find('option').removeAttr('disabled');
// loop trough all the values
for (var j=0; j<vals.length; j++) {
// disabled attribute
$(selects[i]).find('option[value='+vals[j]+']').attr('disabled', 'disabled');
}
}
});