JSFiddle - React, Tailwind, and code Playground

JavaScript

<script type='text/javascript' src='http://moroccoultimateguide.com/wp-content/plugins/tablepress/js/jquery.datatables.min.js?ver=1.9'></script>

<script type="text/javascript">

$(document).ready( function () {
  var table = $('#tablepress-6').DataTable();

 $('input:checkbox').on('change', function () {

   //build a filter string with an or(|) condition
   var offices = $('input:checkbox[name="ofc"]:checked').map(function() {
     return this.value;
   }).get().join('|');

   //now filter in column 3, with no regex, no smart filtering, not case sensitive
   table.column(3).search(offices, true, false, false).draw(false);

 });

} );

</script>

<div id="city">
  <input type="checkbox" name="ofc" value="Marrakech">Marrakech
  <input type="checkbox" name="ofc" value="Chefchaouen">Chefchaouen
  <input type="checkbox" name="ofc" value="Fes">Fes
</div>