title: using jquery 'this' methods
body: <p>how many parameters are there in jquery for below example  how do I have to use <code>this</code></p>
  
  <p>I have two select box and both of them are same if I change value of my select 1 another select has been chancing too and this is something that should not be that's why I want to prevent this how can I do that ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".person-1, .person-2").change(function() {
      var val1 = parseInt($('.person-1').find(":selected").text()),
        val2 = parseInt($('.person-2').find(":selected").text());
  
      $(".addition-1").text(val1);
      $(".addition-2").text(val2);
  
      $(".addition").text(val1 + val2);
  
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>select {
    width: 150px;
    height: 40px;
  }
  
  .personBox {
    background: #FFF;
    width: 350px;
    border: 1px solid #ccc;
    padding: 10px;
    float: left;
    margin-right: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="personBox"&gt;
    &lt;h2&gt;SELECT 1&lt;/h2&gt;
    &lt;select class="person-1"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;select class="person-2"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;p&gt;Add 1: &lt;span class="addition-1"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;Add 2: &lt;span class="addition-2"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;Addition : &lt;span class="addition"&gt;&lt;/span&gt; &lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- personBox--&gt;
  &lt;div class="personBox"&gt;
    &lt;h2&gt;SELECT 2&lt;/h2&gt;
    &lt;select class="person-1"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;select class="person-2"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;p&gt;Add 1: &lt;span class="addition-1"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;Add 2: &lt;span class="addition-2"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;Addition : &lt;span class="addition"&gt;&lt;/span&gt; &lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- personBox--&gt;</code></pre>
  </div>
  </div>
  </p>