Add a filter to an HTML document

Alright, so i have a very simple HTML page which includes a section:

<p class="gallery">
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
</p>

We want to upgrade this page so that we can put a selector at the top (probably checkboxes) with a list of tags. Each image would have multiple tags attached to it, and when one or more checkboxes are selected, only images containing all those tags are shown.

So, for example, Image 1 has "John" and "Steve" as tags,Image 2 has "Joe" and "Jack" and Image 3 has "John" and "Jack". I select the checkbox for "John" and press the filter button, and Both images 1 and 3 stay, but 2 is hidden. I then select "Jack" as well and filter again and image 1 vanishes.

What's the best or easiest way to modify this to achieve this result?

Edit: For the record, I'm not expecting someone to hand me a finished page, but i've found, through research, three or four TOTALLY different methods of filtering out lines like this but none of them i've seen so far could do quite the right thing. For example, I found this javascript combined with data-filter="Tag" and id="tag" but i have no idea if i can make it sort on multiple tags at once or how.

var posts = $('.post');
posts.hide();

$("#category li a").click(function () {

    var customType = $(this).data('filter');
    console.log(customType);
    console.log(posts.length);

    posts.hide();
    $("#" + customType).show();
});

via Chebli Mohamed