title: Issue on multi level filtering DOM based on different data attributes
body: <p>I am working on <a href="http://jsfiddle.net/30sj1ar2/" rel="nofollow noreferrer">this demo</a>. How can I enrich my code to have multi level filtering system based on different existing and potential upcoming data attributes?</p>
  
  <p>As you can see I am trying to filter the <code>.box</code> based on two data attributes <code>shape</code> and <code>color</code> but my code is filtering the DOM separately. How can I fix this?</p>
  
  <pre><code>$('input:checkbox[name=shape]').on('change', function() {
     if ( $('input:checkbox[name=shape]:checked').length &gt; 0)
     {
        $(".box").each(function(){
           $(this).removeClass('fadeInLeft').addClass('fadeOutLeft').css('display','none').css('display','none');
        });
        let data = [];
        $('input:checkbox[name=shape]:checked').each(function() {
           data.push($(this).data('shape'));
        });
        console.log(data);
  
        $.each(data, function(index, value){
           $('.box[data-shape="'+value+'"]').removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block');
        });
     }
     else
     {
        $(".box").each(function(){
           $(this).removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block');
        }); 
     }
  
  });
  
  $('input:checkbox[name=color]').on('change', function() {
     if ( $('input:checkbox[name=color]:checked').length &gt; 0)
     {
        $(".box").each(function(){
           $(this).removeClass('fadeInLeft').addClass('fadeOutLeft').css('display','none').css('display','none');
        });
  
        let data = [];
        $('input:checkbox[name=color]:checked').each(function() {
           data.push($(this).data('color'));
        });
  
  
        $.each(data, function(index, value){
           $('.box[data-color="'+value+'"]').removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block');
        });
     }
     else
     {
        $(".box").each(function(){
           $(this).removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block');
        }); 
     }
  
  });
  </code></pre>