Hide Show divs with 2 different category checkboxes

I'am kinda rookie on programming and i'am trying to fiqure out how to filter divs by 2 category. Like when filtering us eu it works but the next dosent work how do i do that ?

Script

 var sections = $('.sectionContent');
function updateContentVisibility(){
    var checked = $("#filterControls :checkbox:checked");
    if(checked.length){
        sections.fadeOut(400);
        checked.each(function(){
            $("." + $(this).val()).fadeIn(600);
        });
    } else {
        sections.fadeIn(500);
    }
}

$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();

});

HTML

 <div id="filterControls">
        <h3>Buy With: </h3>
            <label><input type="checkbox" value="cash" name="cash" class="check"/> Cash</label>
            <label><input type="checkbox" value="card" name="card" class="check"/> CreditCard</label>


            <label><input type="checkbox" value="us" name="us" class="check"/> us</label>
            <label><input type="checkbox" value="eu" name="eu" class="check"/> eu</label>
        </div>

        <div class="container">


        <div class=" box sectionContent us cash">
        <p>
        us cash
        </p>
        </div>

        <div class=" box sectionContent eu card">
        <p>
        Eu Card
        </p>
        </div>

        <div class=" box sectionContent us card">
        <p>
      us card
        </p>
        </div>

        <div class=" box sectionContent eu cash">
        <p>
        eu cash
        </p>
        </div>
        </div>

Made a fiddle to show what i mean. Fiddle: https://jsfiddle.net/xtg7a22g/14/

Any help would be appreciated!

Best Regards!