title: how to toggle children element in jquery
body: <p>I have parent button with <code>&lt;i&gt;</code> tag element as a children, which is, if i click the button class they will be trigger the toggle class for both parent and child so it set the condition active and inactive button if i move one button to the other, the problem is my toggle class for child element is not working when i click the active button it self, the check icon won't disappear. here is my code <a href="https://jsfiddle.net/hggk6348/" rel="nofollow noreferrer">jsfiddle</a></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(){
    $('.button').on("click", function() {
      $('.price-filter-active').not(this).removeClass('price-filter-active');
      $('.fa').removeClass('fa-check');
  
      $(this).toggleClass('price-filter-active');
      $(this).find("i").toggleClass('fa-check');
    })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.price-filter-container {
    width: 1190px;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 100px;
  }
  .price-filter-active {
    background: #42B549;
    color: white;
  }</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="price-filter-container"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;button class="span2 button"&gt;
             1
              &lt;i class="fa" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
  
          &lt;button class="span2 button"&gt;
              2
              &lt;i class="fa" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
  
          &lt;button class="span2 button"&gt;
              3
              &lt;i class="fa" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
  
          &lt;button class="span2 button"&gt;
            4
              &lt;i class="fa" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>