Can someone help me with the code that I need to activate / deactivate some option?
I have 4 different selects.
First of all I need that jquery check that there are no values ​​greater than the variable stock (I think this is done).
After this I need that when one select changes, check the value of the other selects options and deactivate them if the value is greater than the available stock.
I need to dynamically handle the content of the selects and they are activated / deactivated according to the stock.

I have this code, It works "well" with the first select, but when I change the second select it affects the first one.
I don't know if I explained correctly, but in the jsfiddle/Code I think the idea is better explained
<https://jsfiddle.net/apejqfsg/17/>

**HTML**

```html
<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>
<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>
<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>
<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>

```

**JQUERY**

```js
$(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);
    });
});

```