JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.12/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.12/chosen.css">
<div class="container">
    <input id="preval" class="hidden" type="text" value="" name="" />
    <select class="selectoption">
        <option value="none">None</option>
        <option value="1">1</option>
        <option value="ab">ab</option>
        <option value="xysd">xysd</option>
        <option value="4">4</option>
    </select>
</div>
<div class="container">
    <select class="selectoption">
        <option value="none">None</option>
        <option value="1">1</option>
        <option value="ab">ab</option>
        <option value="xysd">xysd</option>
        <option value="4">4</option>
    </select>
</div>
<div class="container">
    <select class="selectoption">
        <option value="none">None</option>
        <option value="1">1</option>
        <option value="ab">ab</option>
        <option value="xysd">xysd</option>
        <option value="4">4</option>
    </select>
</div>

CSS

.hidden {
    display:none;
}

select {
    width:350px;
}

JavaScript

$(".selectoption").change(function (e) {
    // Show all select
    $('.selectoption option').prop('disabled', false);

    // Hide selected option excep none
    $('.selectoption option:selected[value!="none"]').each(function () {
        $('.selectoption option[value="' + $(this).val() + '"]').not(this).prop('disabled', true);
    });
    
    $("select").trigger("liszt:updated");
});

$('select').chosen({
  "disable_search": true
});