JSFiddle - React, Tailwind, and code Playground

HTML

Choose: 
<select id="select1" class="stock">
    <option value="0">0</option>
    <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>
Choose: 
<select id="select2" class="stock">
    <option value="0">0</option>
    <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> 
Choose: 
<select id="select3" class="stock">
  <option value="0">0</option>
  <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>     
Choose: 
<select id="select4" class="stock">
  <option value="0">0</option>
  <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>  
<p> Max Stock: <span id="disponibles">8</span></p>

JavaScript

$(document).ready(function(){
    var previous;
    var maxStock=8;
    $('.stock option').filter(function() {
         return $(this).val() > maxStock;
     }).prop('disabled', true);

    $(".stock").focus(function () {
        previous = this.value;
        $(".stock option").each(function(){
        });
        
        
    }).change(function() {               
        maxStock=maxStock+(previous-this.value);
        var value = this.value;      
        var id = $(this).attr("id");
        $(".stock option").each(function(){
            var idParent = $(this).parent().attr("id");			
            if(id != idParent){
                if(this.value > maxStock){
                    this.disabled = true;                    
        }
    }
});             
        previous = this.value;     
        $("#disponibles").html(maxStock);
    });
});