title: use jquery .filter() to filter by multiple criteria
body: <p>I have divs that i want to filter by their data attributes. the first filter is by the data-title attribute which is filtered by a text input. the second filter i want to implement is by data-tags attribute. an example of the data-tags is: data-tags="js, php, css"</p>
  
  <p>when a user clicks a tag button, that tag is added to the tags array. i want to be able to filter the divs by both attributes, data-title and data-tags. </p>
  
  <p>here is a sample div</p>
  
  <pre><code>&lt;div id="work-card-0" class="work-card col-md-3 text-center" data-title="Test project" data-tags="js,php,css" style=""&gt;&lt;img class="work-img img-responsive" src="images/skier.png"&gt;&lt;h3 class="work-title"&gt;Test project&lt;/h3&gt;&lt;p class="work-p"&gt;This is a sample project&lt;/p&gt;&lt;a class="btn btn-primary" href="http://google.com" target="_blank"&gt;View&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>here is the jquery</p>
  
  <pre><code>    $(document).ready(function() {
  
    $.getJSON('work.json', function(data) {
     $.each(data, function(key, value) {
      $.each(value, function(k, v) {
       $("#work-section").append("&lt;div id='work-card-" + v.id + "' class='work-card col-md-3 text-center' data-title='" + v.title + "' data-tags='" + v.tag + "'&gt;&lt;img class='work-img img-responsive' src='" + v.image + "'&gt;&lt;h3 class='work-title'&gt;" + v.title + "&lt;/h3&gt;&lt;p class='work-p'&gt;" + v.desc + "&lt;/p&gt;&lt;a class='btn btn-primary' href='" + v.link + "' target='_blank'&gt;View&lt;/a&gt;&lt;/div&gt;");
      });
     });
    });
  
  
  
    $("#filter").on('keyup', function() {
     $("#filter-form").submit();
    });
  
    var tags = [];
    $(".tag").on('click', function() {
     var tag = $(this).attr('value');
     if (tags.indexOf(tag) == -1) tags.push(tag);
     getTags();
    });
  
    function getTags() {
     $("#tag-holder ul").empty();
     for (var i = 0; i &lt; tags.length; i++) {
      $("#tag-holder ul").append("&lt;li value='" + i + "'&gt;" + tags[i] + "&lt;/li&gt;");
     }
    }
  
    //remove tags
    $("#tag-holder ul").on('click', 'li', function() {
     var tag = $(this).attr('value');
     tags.splice(tag, 1);
     getTags();
    });
  
    $("#filter-form").on('submit', function(e) {
     e.preventDefault();
     getTags();
     var search = $("#filter").val();
  
     $.ajax({
      url: 'work.html'
     }).done(function() {
  
      $(".work-card").hide();
      $(".work-card").filter(function() {
       return ($(this).data('title').toLowerCase().indexOf(search.toLowerCase()) &gt; -1);
      }).filter(function() {
       // filter here by tag
      }).show();
     });
    });
  
  
    $("#reset-btn").on('click', function() {
     $("#filter").val("");
     tags = [];
     getTags();
     $(".work-card").show();
    });
  
   });
  </code></pre>
  
  <p>the filter-form form has the input and all the buttons for the tags. when it is submitted the divs are filtered. the title filter works. How can i also filter by data-tags. i want the filter to filter by both data-attributes</p>