title: JQuery - On change, append to $(this).find div
body: <p><strong>Goal:</strong>
  How do I correctly append a value to a div, based on a changed state/value in the select box.</p>
  
  <p>I know that I can manipulate the div directly via: $('added_options').append</p>
  
  <p>But assuming that I might have multiple classes named 'box#' with the same content as below, I would only like to change what is within the selected div, not all.</p>
  
  <p><em>(This is a relatively simple question. I am assuming I am misinterpreting the way that $(this).find() works in respect to the on 'change' event.)</em></p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
  
          $('.box1').on('change', '.select_option', function(e){
              e.preventDefault(); 
              $(this).find('.added_options').append("test");
          });
      })
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="box1"&gt;
      &lt;select class="select_option"&gt;
          &lt;option value="" disabled selected&gt;Select&lt;/option&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;/select&gt;
      &lt;button type="button" class="add_option"&gt;Add Option&lt;/button&gt;
      &lt;div class="added_options"&gt;
          &lt;!--Added options--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>