JSFiddle - React, Tailwind, and code Playground

HTML

<select id='qty'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
    <option value='8'>8</option>    
    <option value='9'>9</option>
    <option value='10'>10+</option>    
</select>

JavaScript

var lastValue =1;
var select;
$('#qty').live('change', function () {
    if ((this.value) == 10) {
        select = this;
        $(this).replaceWith($('<input/>', {
            'type': 'text',
            'value': + (this.value),
            'id' : 'qtyBox'
        }));
        
    }
    else{
        lastValue = $(this).value;
    }
});

$('#qtyBox').live('input', function(){
    if(value ==''){
        //recreate the list, set the call .val(lastValue) on it
    }
});