title: How can i filter content using JavaScript
body: <p>I really need your help.</p>
  
  <p>I have a div with 7 input elements (buttons) and a clear selection.</p>
  
  <pre><code>&lt;div class="col-lg-2 col-md-12"&gt;
      &lt;a id="clear-selection" class="clear-selection"&gt;Clear Selections&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-10 col-md-12 selectable-buttons-container"&gt;
      &lt;input type="button" value="Button 1" class="btn btn-sm btn-selectable-blue" /&gt;
      &lt;input type="button" value="Button 2"  class="btn btn-sm btn-selectable-blue" /&gt;
      &lt;input type="button" value="Button 3"  class="btn btn-sm btn-selectable-blue" /&gt;
      &lt;input type="button" value="Button 4"  class="btn btn-sm btn-selectable-blue" /&gt;
      &lt;input type="button" value="Button 5" class="btn btn-sm btn-selectable-blue" /&gt;
      &lt;input type="button" value="Button 6"  class="btn btn-sm btn-selectable-blue" /&gt;
      &lt;input type="button" value="Button 7"  class="btn btn-sm btn-selectable-blue" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also, i have content with many (over 30 rows) each of them beside other content, has some of the buttons listed in it for example </p>
  
  <p>First row</p>
  
  <pre><code>&lt;div class="row" style="padding-top: 30px;"&gt;
      &lt;div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12"&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 dynamic-divs"&gt;
              &lt;div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" style="padding-left: 0; padding-right: 0"&gt;
                  &lt;input type="button" value="Button 6" class="btn btn-sm btn-dynamic-blue" /&gt;
                  &lt;input type="button" value="Button 2" class="btn btn-sm btn-dynamic-gray" /&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"&gt;
                  &lt;p class="dynamic-div-title"&gt;Div Title&lt;/p&gt;
                  &lt;p class="dynamic-div-text"&gt;Div Text&lt;/p&gt;
                  &lt;p class="dynamic-div-link"&gt;See Other Versions &lt;img src="images/arrow-right.png" alt="Arrow"&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-6 col-md-6 col-sm-5 col-xs-12"&gt;
                   &lt;button class="btn dynamic-div-btn"&gt;&lt;img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"&gt; Download&lt;/button&gt;
                    &lt;p class="hardened-images"&gt;This is some example paragraph&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Second row </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12"&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 dynamic-divs"&gt;
              &lt;div class="col-lg-2 col-md-2 col-sm-3" style="padding-left: 0; padding-right: 0"&gt;
                  &lt;input type="button" value="Button 3" class="btn btn-sm btn-dynamic-blue" /&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-4 col-md-4 col-sm-4"&gt;
                  &lt;p class="dynamic-div-title"&gt;Div Title&lt;/p&gt;
                  &lt;p class="dynamic-div-text"&gt;Text&lt;/p&gt;
                  &lt;input type="button" value="See Other Versions" class="dynamic-div-link"&gt;&lt;img src="images/arrow-right.png" alt="Arrow"&gt;&lt;/input&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-6 col-md-6 col-sm-5"&gt;
                  &lt;button class="btn dynamic-div-btn"&gt;&lt;img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"&gt; Download&lt;/button&gt;
                  &lt;p class="hardened-images"&gt;This is second example paragraph&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, what I need to do is basically a filter, i.e when someone press the Button 1 I will only show all rows that have Button 1 in their content.</p>
  
  <p>Then if someone press Button 3 I will show all the rows that has BUTTON 1 or BUTTON 3 listed inside them etc. until someone press CLEAR SELECTION then its back to default (all rows displayed). </p>
  
  <p>Can someone please help me and tell me a way I can get this done? </p>
  
  <p>I think this can be done with jQuery or pure JS. I have tried to do this and I have some code but to be honest I AM NOT even close to what I need so that's why I thought to ask you hoping someone can help me here.</p>