jQuery targeting inside of a div
<p>I have a form where I want to show an input box when an option is selected. </p>

<p><strong>The problem:</strong> I am allowing users to add more form elements dynamically, so the id's count up, and I'm not sure how to target the current form input, and not every single one.</p>

<p><strong>As an example, after a user adds a 2nd form item I have something similar to this:</strong></p>

<pre><code>&lt;div class="option-wrapper"&gt;
    &lt;div id="condition-1" class="condition"&gt;
      &lt;select id="option-1" class="option"&gt;
          &lt;option value="0"&gt;Select...&lt;/option&gt;
          &lt;option value="1"&gt;Option One&lt;/option&gt;
          &lt;option value="2"&gt;Option Two&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id="operator-1" class="operator"&gt;
          &lt;option value="0"&gt;Select...&lt;/option&gt;
          &lt;option value="1"&gt;greater than&lt;/option&gt;
          &lt;option value="2"&gt;less than&lt;/option&gt;
      &lt;/select&gt;
      &lt;div id="input-1" class="form-input" style="display:none;"&gt;
          &lt;input id="form-input-1" class="form-input"&gt;&lt;/input&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="option-wrapper"&gt;
    &lt;div id="condition-2" class="condition"&gt;
      &lt;select id="option-1" class="option"&gt;
          &lt;option value="0"&gt;Select...&lt;/option&gt;
          &lt;option value="1"&gt;Option One&lt;/option&gt;
          &lt;option value="2"&gt;Option Two&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id="operator-2" class="operator"&gt;
          &lt;option value="0"&gt;Select...&lt;/option&gt;
          &lt;option value="1"&gt;greater than&lt;/option&gt;
          &lt;option value="2"&gt;less than&lt;/option&gt;
      &lt;/select&gt;
      &lt;div id="input-2" class="form-input" style="display:none;"&gt;
          &lt;input id="form-input-2" class="form-input"&gt;&lt;/input&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Trying to target #input-2 to show it</strong>, by using form-input. Only want to show it for the current option-wrapper, inside the wrapper the user is currently working in.</p>

<p><strong>Currently trying:</strong></p>

<pre><code>$('.operator').change(function() {
switch (this.value) {
    case '0':
        break;
    case '1':
        $(this).parents('.form-input').toggle();
        break;
}
});
</code></pre>

<p>I know this use of parents is wrong, I've tried a lot of variations and haven't been able to hit the one I wanted. Any help is appreciated, thanks!</p>
