JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<h1>Mitarbeiter Übersicht</h1>

<div class="optionen">
    
    <button type="button" class="filter" id="filter-kein-anruf">'Keine Anrufe gewünscht' ausblenden</button>
    <button type="button" class="filter" id="filter-notizen">'Keine Notizen' ausblenden</button>   

</div>

<table class="users">
    
    <thead>
        <tr>
            <th>Benutzername</th>
            <th>Name</th>
            <th>Letzer Login</th>
            <th></th>
        </tr>
    </thead>
    
    <tbody>
        <tr class="user notizen">
            <td>Benutzer 1</td>
            <td>Viktoria Mustermann</td>
            <td>07.05.2015 - 07:48 Uhr</td>
            <td><img src="http://fs2.directupload.net/images/150507/jrajkpd6.png" width="16" height="16" alt="Passwort ändern" title="Passwort ändern" /> - <img src="http://fs1.directupload.net/images/150507/7rg4gr6s.png" width="16" height="16" alt="Mitarbeiter löschen" title="Mitarbeiter löschen"/>
                
            </td>
        </tr>
        <tr class="user notizen">
            <td>Benutzer 2</td>
            <td>Thore Mustermann</td>
            <td>06.05.2015 - 10:46 Uhr</td>
            <td><img src="http://fs2.directupload.net/images/150507/jrajkpd6.png" width="16" height="16" alt="Passwort ändern" title="Passwort ändern" /> - <img src="http://fs1.directupload.net/images/150507/7rg4gr6s.png" width="16" height="16" alt="Mitarbeiter löschen" title="Mitarbeiter löschen" /></td>
        </tr>
        <tr class="user kein-anruf notizen">
            <td>Benutzer 3</td>
            <td>Melissa Mustermann</td>
            <td>05.05.2015 - 18:03 Uhr</td>
            <td><img src="http://fs2.directupload.net/images/150507/jrajkpd6.png" width="16" height="16" alt="Passwort ändern" title="Passwort ändern"/> - <img src="http://fs1.directupload.net/images/150507/7rg4gr6s.png" width="16" height="16" alt="Mitarbeiter löschen"...

CSS

.optionen { margin:3em 0;}
	
	.filter {
		background-color:#efefef;
		border:none;
		padding:0.5em;
		border:1px solid #9F9F9F;
	}
	
	.filter-active {background-color:#FC9;}	
	
	/* ausblenden von Einträgen wenn Filter aktiv */
	.users.filter-kein-anruf-active .user.kein-anruf, 
	.users.filter-notizen-active .user.notizen{display:none}
		
	table {
		border-collapse:separate;
		border-spacing:1px;
	}
	
	thead { background-color:rgba(25, 85, 121, 0.75); color:#fff;}
	tbody { background-color:#f2f1f1;}
	
	th, td {
		text-align:left;
		vertical-align:top;
		padding:0.5em 1em;
	}
	
	tbody tr:nth-child(odd) { background-color:#e7e5e5;}
	tbody tr:hover {background-color:#999;}

JavaScript

// preset by cookie
if($.cookie("filter-kein-anruf") == "true"){    
    $("#filter-kein-anruf").addClass("filter-active");
    $("table.users").toggleClass("filter-kein-anruf-active");
}
if($.cookie("filter-notizen") == "true"){    
    $("#filter-notizen").addClass("filter-active");
    $("table.users").toggleClass("filter-notizen-active");
}

$(".optionen .filter").click(function(){
	
    // determine clicked filter
    var clicked_id = $(this).attr("id");
    
    // change button style
    $(this).toggleClass("filter-active");
    
    // filter table   
    $("table.users").toggleClass(clicked_id + "-active");
    
    // remember setting (store in cookie)
    $.cookie(clicked_id, $(this).hasClass("filter-active"));    
    
});