JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<select name="foo">
    <option value="" disabled selected>Please Select</option>
    <option value="1">One <span class="status"></span></option>
    <option value="2">Two <span class="status"></span></option>
    <option value="3">Three <span class="status"></span></option>
    <option value="4">Four <span class="status"></span></option>
    <option value="5">Five <span class="status"></span></option>
</select>

<input disabled>

JavaScript

$('select').on('focus', function(){
    $('option').each(function(){
        this.lastText = this.innerHTML;
        console.log(this.value);
        if (+this.value % 2) {
            $(this).text(this.innerHTML + ' - Sold Out');
        }
    });
    
}).on('blur', function(){
    $('option').each(function(){ this.innerHTML = this.lastText; });
}).on('change', function(){ $('input').val($(this).val()); })