JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<select name="options[70]" id="select_70">
    <option value="1" price="0">test-1</option>
    <option value="2" price="0">test-2</option>
    <option value="3" price="0">test-3</option>
</select>
<select name="options[71]" id="select_71">
    <option value="4" price="0">test-1</option>
    <option value="5" price="0">test-2</option>
    <option value="6" price="0">test-3</option>
</select>
<select name="options[72]" id="select_72">
    <option value="7" price="0">test-1</option>
    <option value="8" price="0">test-2</option>
    <option value="9" price="0">test-3</option>
</select>
<select name="options[73]" id="select_73">
    <option value="10" price="0">test-1</option>
    <option value="11" price="0">test-2</option>
    <option value="12" price="0">test-3</option>
</select>
<select name="options[74]" id="select_74">
    <option value="13" price="0">test-1</option>
    <option value="14" price="0">test-2</option>
    <option value="15" price="0">test-3</option>
</select>

JavaScript

var $selects = $('select');
available = {};

$('option', $selects.eq(0)).each(function (i) {
    var val = $.trim($(this).text());
    available[val] = false;
});

$selects.change(function () {
    var $this = $(this);
    var selectedVal = $.trim($this.find('option:selected').text());

    available[selectedVal] = true;

    $selects.not(this).each(function () {
        $('option', this).each(function () {
            var optText = $.trim($(this).text()),
                optCheck = available[optText];
            if(optCheck) {
                $(this).prop('disabled', true);
            }
            else {
                 $(this).prop('disabled', false);
            }
        });
    });
}).change(); // Trigger once to add options at load of first choice