JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<div class="card mb-5">
    <div class="card-header">Сompare</div>
    <div class="card-body">
        <div class="form-row">
            <div class="col-md-6">
                <label for="first-widget">First widget</label>
                <select id="first-widget" class="form-control">
                    <option></option>
                </select>
            </div>
            <div class="col-md-6">
                <label for="second-widget">Second widget</label>
                <select id="second-widget" class="form-control">
                    <option></option>
                </select>
            </div>
        </div>
    </div>
</div>

JavaScript

// Select2 defaults
    $.fn.select2.defaults.set( 'placeholder', 'Select' );
    
    var categories = [ 'BMW', 'Bentley', 'Audi', 'Aston Martin', 'Alfa Romeo' ];
    var firstWidget = $( '#first-widget' ), secondWidget = $( '#second-widget' );
    var currentValue = '';
    
    firstWidget.select2( {
        data: categories,
        allowClear: false,
        minimumResultsForSearch: -1
    } );
    
    secondWidget.select2( {
        data: categories,
        allowClear: false,
        minimumResultsForSearch: -1,
        templateResult: function ( optData, optElement ) {
            $( optElement ).attr( 'data-value', optData.text );
            
            return optData.text;
        }
    } );
    
    firstWidget.on( 'select2:select', function () {
        var optionSelectedVal = this.value;
        var optionSelectedEl = secondWidget.find( 'option[value="' + optionSelectedVal + '"]' );
        if ( optionSelectedEl.length ) {
            if ( currentValue != '' ) {
                secondWidget.find( 'option[value="' + currentValue + '"]' ).attr( 'disabled', false );
            }
            
            // If secondWidget value is equal to optionSelectedVal then set it to empty
            if ( secondWidget.val() === optionSelectedVal ) {
                secondWidget.val( null ).trigger( 'change' );
            }
            
            // Disable <option> element in the secondWidget
            optionSelectedEl.prop( 'disabled', true );
            
            // Current value
            currentValue = optionSelectedVal;
        }
    } );
    
    secondWidget.on( 'select2:open', function () {
        setTimeout( function () {
            // Disable the option in the select2 results
            var select2ResultOption = $( 'li.select2-results__option[data-value="' + currentValue + '"]' );
            select2ResultOption.attr( 'aria-disabled', true );
            select2ResultOption.removeAttr( 'aria-selected' );
        } );
    } );