JSFiddle - React, Tailwind, and code Playground

HTML

<div id='questions'></div>

JavaScript

var $qs; 

$(function(){
    $qs = $('#questions'); 
    
    var $S1 = $('<select class="question" />'); 
    $S1.append($('<option/>', {'val':1, 'text':1}));    
    $S1.append($('<option/>', {'val':3, 'text':3}));

    $qs.append($S1).append('<br />');
    
    var $S2 = $('<select class="question" />'); 
    $S2.append($('<option/>', {'val':2, 'text':2}));    
    $S2.append($('<option/>', {'val':3, 'text':3}));

    $qs.append($S2);
    
    var $prev = null;
    $("select.question").focus(function () {
        
        //The currently selected option
        $prev = $(this).find("> option:selected");
    
    }).change(function () {
                    
        //The select list I am manipulating 
        var $select = $(this);
        
        //Get all the select elements excluding the one we're currently on.
        var Qs = $("select.question").not($select);
        
        //Add the de-selected option to all the other grids
        Qs.prepend($prev.clone());
        
        //Remove the selected option from all the other grids
        Qs.find(" > option:[value='" + $select.val() + "']").remove();
        
    });
    
    //Programatically changing the options
    $S1.focus().children('option:eq(1)').click().prop('selected', true).end().change(); 
    $S2.focus().children('option:eq(0)').click().prop('selected', true).end().change();
});