How do I create a filter for content displayed using Javascript?

I'm building a film review site, where all of the content is generated on the main page from data input in the admin panel and placed into a container div.

I'm building a film review site, where all of the content is generated on the main page from data input in the admin panel and placed into a container div.

I've got a basic sorting system (by ID, ascending/descending) already which works fine on my end, but I also want to be able to filter the films by genre (e.g if film is marked as Action on database, make all non-action films hidden.

This cannot be done by CSS alone as I'm not able to add classes to the content within the containers, the container for the film image is generated via JS.

I'm assuming I need to create a new function such as

 function getFilmListByGenre(genreName)

Or something along those lines, but I don't know how I'd make it work.

Here is the current Javascript that I have, which creates the sort feature.

      let db = new PouchDB('films');

let radios = document.getElementsByName("sort");
radios[0].addEventListener("change", getFilmList);
radios[1].addEventListener("change", getFilmList);

getFilmList();

function getFilmList(){
db.allDocs({include_docs: true, descending: radios[0].checked}).then(function(films){

  let listContents = '';


  for(let i = 0; i < films.total_rows; i++) {
    let thisFilm = films.rows[i].doc;
    let image = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><img class="filmImage" src="' + thisFilm.image +'"></a>';


    listContents += '<div class="filmRow">'+ image + '</div>';
  }

  document.getElementById('filmContainer').innerHTML = listContents;

})

}

I basically want to grab the value for genre (which can only be "Action", "Comedy", "Horror" or "Other") for each film from the database, then if the corresponding radio (named filter) is selected, all of the films which aren't labelled as that genre are hidden.

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}

h1 {
color: #aaaaaa;
text-align: left;
}

.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}

header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}

.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}

label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}

.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}

h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}

#formTitle {
margin-top: 0;
margin-bottom: 0;
}

.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}

.col {
padding: 20px;
}

input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}

.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}

input::placeholder {
color: #000;
}

textarea::placeholder {
color: #000;
}

#modifyFilmButton {
float: right;
}

@media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}

@media screen and (max-width:800px) {
table {
border: 0;
}

table caption {
font-size: 1.3em;
}

table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}

table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}

table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}

table td:last-child {
border-bottom: 0;
}
}

.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}

#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}

td {
padding: 5px;
font-weight: bold;
}

table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}

.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}

.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}

#filmContainer {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}

#date {
padding: 5px;
text-align: left;
width: 30%;
}

#date input {
width: auto;
}

#date label {
display: -webkit-inline-box;
}

#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}

.genre {
padding: 5px;
text-align: left;
width: 60%;
}

.genre input {
width:auto;
}

.genre label {
display: -webkit-inline-box;
}
<div class="sortFilms">
<h2 id="formTitle">Latest reviews</h2>
<div id='filmContainer'></div>
</div>
<div class="oldFilm">
<h2 id="oldTitle2">Sort by</h2>
<div id="date">
<p><b>Age of review</b></p>
<label>Newer<input type="radio" name="sort" checked/></label>
<label>Older<input type="radio" name="sort"/></label>
</div>
<div class="genre">
<p><b>Genre</b></p>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>

</div>
</div>


How to Create an Animated Navbar with Html, CSS and JavaScript

How to Create an Animated Navbar with Html, CSS and JavaScript

In this Html, CSS and JavaScript tutorial you will build an animated navbar with Html, CSS and JavaScript. Have you every wanted to create an awesome animated navbar with JavaScript? We will be looking at making a navbar with Html and CSS and then using the intersection observer in JavaScript to help us create this effect.

Javascript Animated Navbar Tutorial

Have you every wanted to create an awesome animated navbar with javascript? no? oh well...this is akward.

All jokes aside we will be looking at making a navbar with html and css and then using the intersection observer in javascript to help us create this effect.

TIP Calculator using HTML, CSS & Javascript

TIP Calculator using HTML, CSS & Javascript

We take a deep dive into how to code a tip calculator using HTML, CSS & Javascript. This tutorial can be considered as a beginner tutorial. We look into form inputs, styling form inputs in CSS & HTML while using Javascript to create the interactivity needed to calculate tips.

We take a deep dive into how to code a tip calculator using HTML, CSS & Javascript. This tutorial can be considered as a beginner tutorial. We look into form inputs, styling form inputs in CSS & HTML while using Javascript to create the interactivity needed to calculate tips.

How to Create Attendance Register in JavaScript, CSS, and HTML

How to Create Attendance Register in JavaScript, CSS, and HTML

How to Create Attendance Register in JavaScript, CSS, and HTML. The tutorial includes the use of JavaScript functions, image, Table, Option, input, and other components.

How to Create Attendance Register in JavaScript, CSS, and HTML. The tutorial includes the use of JavaScript functions, image, Table, Option, input, and other components.