[Fixed]-Django templatetags for jquery to get item from html templatetag

You can use ID tags to identify your image blocks and give them the same class name.

So your HTML could look like this with changes to the button tag and your photo-post class.

<div class="container">
    <div class="photo-title">
        <h1>Welcome to Our Photo Album</h1>
    </div>
    <div class="col-sm-12 photoalbum-buttons">

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By Country
            </button>
            <ul class="dropdown-menu">
                <li><button id="all_countries" value="all_countries">All Countries</button></li>
                {% for obj in object_list %}
                    <li><button id="{{ obj.country }}" value="{{ obj.country }}">{{ obj.country }}</button></li>
                {% endfor %}
            </ul>
        </div>

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By City
            </button>
            <ul class="dropdown-menu">
                {% for obj in object_list %}
                    <li><button id="{{ obj.city }}" value="{{ obj.city }}">{{ obj.city }}</button></li>
                {% endfor %}
            </ul>
        </div>

    </div>

    <div id="all-photos-div">
        <div class="dropdown form-actions hidden-div">
            <button id="all_photos" class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                All Photos
            </button>
        </div>
    </div>

    <p id="photo-separator">______________________________________________</p>

    <div class="row">
       <div class="row photo-post">
            {% for obj in object_list %}
                <div class="col-sm-3 country-name-class" id="country_{{obj.slug}}">
                    <div class="thumbnail">
                        <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="{{ obj.city }}, {{ obj.country }} {% if obj.picture_taken %}| {{ obj.picture_taken }}{% else %}{% endif %}" data-caption="{% if obj.picture_description %}{{ obj.picture_description }}{% else %}{% endif %}" data-image="{{ obj.pictures.url }}" data-target="#image-gallery">
                            <img class="img-responsive pic-height" src="{{ obj.pictures.url }}" alt="Short alt text">
                        </a>
                        <div class="caption photo-description">
                            <p class="photo-location">{{obj.city}}, {{obj.country}}</p>
                            <p class="photo-time">{% if obj.picture_taken %}{{ obj.picture_taken }}{% else %}{% endif %}</p>
                             <p>
                                 <a class="thumbnail btn btn-primary" href="#" type="button" data-image-id="" data-toggle="modal" data-title="{{ obj.city }}, {{ obj.country }} {% if obj.picture_taken %}| {{ obj.picture_taken }}{% else %}{% endif %}" data-caption="{% if obj.picture_description %}{{ obj.picture_description }}{% else %}{% endif %}" data-image="{{ obj.pictures.url }}" data-target="#image-gallery">
                                    View
                                 </a>
                             </p>
                        </div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:4 %}
                    <div class='col-sm-12'><hr/></div></div><div></div><div class='row'>
                {% endif %}
            {% endfor %}
        </div>
    </div>
...

Change jquery to this

$(function(){
    $("div.dropdown.form-actions > ul.dropdown-menu > li > button").click(function(){
        var country = $(this).attr(id);
        $(".country-name.class").hide();
        $("#country_"+country).show();
});