title: jquery add class to element inside this element only
body: <p>This is for a user account. When the user hits the edit button I want an edit box to be displayed inside the element where the button exists.</p>
  
  <p>So I have this markup</p>
  
  <pre><code>&lt;div class="col account"&gt;
      &lt;strong&gt;Account Settings&lt;/strong&gt;
          &lt;div class="col"&gt;
              &lt;span&gt;Profile Status&lt;/span&gt;
                  &lt;p&gt;&lt;?= $this-&gt;escape($this-&gt;status); ?&gt;&lt;/p&gt;
                  &lt;button class="edit-btn"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;div class="edit-box"&gt;
                      edit 1
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col"&gt;
                  &lt;span&gt;Name&lt;/span&gt;
                  &lt;p&gt; &lt;?= $this-&gt;escape($this-&gt;name); ?&gt;&lt;/p&gt;
                  &lt;button class="edit-btn"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;div class="edit-box"&gt;
                      edit 2
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col"&gt;
                  &lt;span&gt;Username&lt;/span&gt; 
                  &lt;p&gt;&lt;?= $this-&gt;escape($this-&gt;username); ?&gt;&lt;/p&gt;
                  &lt;button class="edit-btn"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;div class="edit-box"&gt;
                      edit 3
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col"&gt;
                  &lt;span&gt;Bio&lt;/span&gt;
                  &lt;p&gt;&lt;?= $this-&gt;escape($this-&gt;bio); ?&gt;&lt;/p&gt;
                  &lt;button class="edit-btn"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;div class="edit-box"&gt;
                      edit 4
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col"&gt;
                  &lt;span&gt;Email&lt;/span&gt;
                  &lt;p&gt;&lt;?= $this-&gt;escape($this-&gt;email); ?&gt;&lt;/p&gt;
                  &lt;button class="edit-btn"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;div class="edit-box"&gt;
                      edit 5
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col"&gt;
                  &lt;span&gt;Password&lt;/span&gt;
                  &lt;p&gt;**********&lt;/p&gt;
                  &lt;button class="edit-btn"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;div class="edit-box"&gt;
                      edit 6
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Then I have jquery</p>
  
  <pre><code>$(document).ready(function()
  {
      $('.edit-btn').click(function()
      {
          $('.edit-box').addClass('open');
      });
  });
  </code></pre>
  
  <p>Is there a way to add a class only to the .edit-box that lives in the same .col as the .edit-btn?</p>
  
  <p>Here is a js fiddle <a href="https://jsfiddle.net/y6ukq3th/" rel="nofollow">https://jsfiddle.net/y6ukq3th/</a></p>