HubSpot custom module to display data from hubdb and search filter - hubspot

Question

I'm trying to create a custom module in HubSpot to display data from hubdb and i also to make a search filter so that users can search for some specific info on the pay but i'm having some issue with the filter. Could anyone assist me? Below is my code so far.
Here is my hubDB Table column (i'm using dynamic pages):
| hs_name | hs_path | title | decription | country | date | location | language | image | url |
search filter screenshot and Display of the data screenshot
<div class="container mt-5 filter">
<div class="row">
<div class="col-md-6 mt-0 filter-search" style="text-align: left;">
<input type="text" id="myInput" placeholder="Search..." />
</div>
<div class="col-sm-2 filter-section">
<select class="country">
<option value="all">All Country</option>
<option value="UK"> UK </option>
<option value="BE"> Belgium </option>
</select>
</div>
<div class="col-sm-2 filter-section">
<select class="language">
<option value="all">Language</option>
<option value="English"> English </option>
<option value="French"> French</option>
</select>
</div>
<div class="col-sm-2 filter-section">
<select class="tags">
<option value="all">Tags</option>
<option value="Virtual">Virtual</option>
<option value="Physical">Physical</option>
</select>
</div>
</div>
</div>
<div class="container FilterContainer mt-5">
{% set current_dt = unixtimestamp( local_dt ) %}
  {% set query = "date__lt="~current_dt~"&orderBy=-date" %}
  {% set table = hubdb_table_rows(<hubdbTableId>, query) %}
{% for row in table %}
<div class="card column" data-country="{{ row.country == "BE" }}" data-language="{{ row.language == "English" }}" data-tag="{{ row.country == "Virtual" }}">
<div class="row no-gutters">
<div class="col-md-4">
<img src="{{ row.image.url }}" alt="Banner" class="img-fluid h-100" />
</div>
<div class="col-md-6">
<div class="card-body">
<p class="card-text">
<span class="badge badge-pill">{{ row.country }}</span>
<span class="badge badge-pill"> <i class="fa fa-calendar"></i> {{ row.date|datetimeformat(('%B %e, %Y')) }}</span>
<span class="badge">{{ row.location }}</span>
<span class="badge badge-pill">{{ row.language }}</span>
</p>
<h5 class="card-title"><strong>
{{ row.title }}</strong></h5>
<p><strong>Decription: </strong>{{ row.decription }}</p>
</div>
</div>
<div class="event-detail-border"></div>
<div class="col-md-2 btn-body">
Read More
</div>
</div>
</div>
{% endfor %}
</div>
<script>
$("select.country, select.language, select.tags").change(updateEvents);
$("#myInput").on("keyup", updateEvents);
function updateEvents() {
var country = $('select.country').val();
var language = $('select.language').val();
var tags = $('select.tags').val();
var search = $("#myInput").val();
$('.FilterContainer')
.find('.column')
.hide()
.filter(function() {
var okCountry = true;
var okLanguage = true;
var okTags = true;
var okSearch = true;
if (country !== "all") {
okCountry = $(this).attr('data-country') === country;
}
if (language !== "all") {
okLanguage = $(this).attr('data-language') === language;
}
if (tags !== "all") {
okTags = $(this).attr('data-teacher') === tags;
}
if (search !== '') {
okSearch = $(this).text().toLowerCase().indexOf(search) > -1;
}
//only fade a room if it satisfies all four conditions
return okCountry && okLanguage && okTags && okSearch;
}).fadeIn('fast');
}
</script>