JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css">
<label for="call_type">Call Type:</label>
<select name="call_type" id="call_type" class="chosen">
    <option value="OUTGOING">Outgoing</option>
    <option value="INCOMING">Incoming</option>												</select>
											
<label for="caller">Caller:</label>
<select name="caller" id="caller" class="caller chosen">
    <option value="Caller 1">Caller 1</option>	
    <option value="Caller 2">Caller 2</option>	
    <option value="Caller 3">Caller 3</option>	
    <option value="OTHER">Other</option>
</select>

<label for="caller">Callee:</label>
<select name="callee" id="callee" class="callee chosen">
    <option value="Callee 1">Callee 1</option>	
    <option value="Callee 2">Callee 2</option>	
    <option value="Callee 3">Callee 3</option>	
    <option value="OTHER">Other</option>
</select>

JavaScript

$(document).ready(function() {
    
    // on call type change
    $('#call_type').change(function(){
        
        var callerOptions = [];
        var calleeOptions = [];

        // get a list of all caller options
        $('#caller option').each(function() {						
            var optionValue = $(this).val();
            var optionText = $(this).text();
            if(optionValue != '') {
                obj = {};
                obj['value'] = optionValue;
                obj['text'] = optionText;
                callerOptions.push(obj);
            }
        });
        
        // get a list of all callee options
        $('#callee option').each(function() {						
            var optionValue = $(this).val();
            var optionText = $(this).text();
            if(optionValue != '') {
                obj = {};
                obj['value'] = optionValue;
                obj['text'] = optionText;
                calleeOptions.push(obj);
            }
        });
        
        // remove all caller options
        $('#caller option').remove();
        $("#caller").trigger('chosen:updated');
        
        // remove all callee options
        $('#callee option').remove();
        $("#callee").trigger('chosen:updated');
        
        // add callee options to caller select
        $.each(calleeOptions, function(i){
            $('#caller').append("<option value='"+calleeOptions[i]['value']+"'>"+calleeOptions[i]['text']+"</option>");
            $('#caller').trigger("chosen:updated");
        });
        
        // add caller options to callee select
        $.each(callerOptions, function(i){
            $('#callee').append("<option value='"+callerOptions[i]['value']+"'>"+callerOptions[i]['text']+"</option>");
            $('#callee').trigger("chosen:updated");
        });
        
    });
    
});