jquery working in containers with parent() and closest()

Question

I have a hard time to figure out how I can make a jQuery function work separately in different containers, for me the container is called 'dyndrop'.

I have two drop down menus, the second drop down is dependent on the value of the first drop down. So far it works well for the first drop down pair on the page, but all the others won't.

I know it comes from selecting .aufgabe_0 which will select every class in the DOM, which are 10. So how can I make this function work inside the 'dyndrop' container only.

Thank you!

HTML

 <div class="dyndrop columns nopadding large-4">
    <div class="columns large-6">
        <label>
          <select class="aufgabe_0"> <!-- aufgabe_1 -->
            <!-- Frage ist ob CGI/CAS dieses Feld dynamisch ändert -->
            <option disabled selected value="">Aufgabe</option>
            <option value="int">Interieur</option>
            <option value="ext">Exterieur</option>
          </select>
        </label>
    </div>
    <div class="columns large-6">
        <label>
          <select class="bauteil_0" disabled> <!-- bauteil_1 -->
            <!-- reagiert auf vorheriege eingabe -->
            <option disabled selected value=""></option>
            {% for int in menu_int %}
            <option value="int">{{ int }}</option>
            {% endfor %}
            {% for ext in menu_ext %}
            <option value="ext">{{ ext }}</option>
            {% endfor %}
          </select>
        </label>
    </div>
</div>

JS

$(function() {
  $('.aufgabe_0').change(function(){
    if ($('.aufgabe_0 option:selected').val() == 'int') {
      console.log('interieur ausgewählt');
      $('.bauteil_0').prop( "disabled", false );
      $('.bauteil_0 option').hide().filter('.bauteil_0 option[value="int"]').show();
    }
    else if ($('.aufgabe_0 option:selected').val() == 'ext') {
      console.log('exterieur ausgewählt')
      $('.bauteil_0').prop( "disabled", false );
      $('.bauteil_0 option').hide().filter('.bauteil_0 option[value="ext"]').show();
    }
    else {
      $('.bauteil_0').prop( "disabled", true );
    }
  });
});

Answer 1

You can use .closest() to traverse upto common parent then use .find() to target the desire element.

$('.aufgabe_0').change(function () {
    //Use these object
    var aufgabe = $(this);
    var bauteil = aufgabe.closest('.dyndrop').find('.bauteil_0');

    ...
});

$('.aufgabe_0').change(function() {
  //Use these object
  var aufgabe = $(this);
  var bauteil = aufgabe.closest('.dyndrop').find('.bauteil_0');

  bauteil.prop('disabled', !bauteil.prop('disabled'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dyndrop columns nopadding large-4">
  <div class="columns large-6">
    <label>
          <select class="aufgabe_0">  
          <option value="int1">Select</option>
            <option value="int">Interieur</option>
          </select>
        </label>
  </div>
  <div class="columns large-6">
    <label>
          <select class="bauteil_0" disabled>
            <option value="int">1</option>
          </select>
        </label>
  </div>
</div>
<div class="dyndrop columns nopadding large-4">
  <div class="columns large-6">
    <label>
          <select class="aufgabe_0">  
          <option value="int1">Select</option>
            <option value="int">Interieur</option>
          </select>
        </label>
  </div>
  <div class="columns large-6">
    <label>
          <select class="bauteil_0" disabled>
            <option value="int">1</option>
          </select>
        </label>
  </div>
</div>