JSFiddle - React, Tailwind, and code Playground

by Erik Jan de Wilde

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/css/bootstrap-multiselect.css">
<html>

  <body>
    <div id="datafilter">
      <div id="checkBoxBlok">
        <div id="regios" class="dropdown-check-list" tabindex="100">
          <span class="anchor">{{ region_head }}</span>
          <ul class="items">
            <li v-for="option in regios">
              <input
                v-on:click="adjustCheckBoxesRegions()"
                :value="option.name"
                type="checkbox"
                v-model="option.selected"
                                
              />
              {{ option.name }}
            </li>
          </ul>
        </div>
        <div id="locaties" class="dropdown-check-list" tabindex="101">
          <span class="anchor">{{ town_head }}</span>
          <ul class="items">
            <li v-for="option in locaties">
              <input
                :value="option.name"
                type="checkbox"
                v-model="option.selected"
              />
              {{ option.name }}
            </li>
          </ul>
        </div>
        <div>

          <button class="selectallbutton" v-on:click="selectAll()">
            Select all regions and towns
          </button>
        </div>
      </div>
      <div>

      <span class="output"
        >selected regions: {{ regios }}<br
      /></span>
      <span class="output"
        >selected towns: {{ locaties }}<br
      /></span>

      <span class="output">data: {{ FilterData() }}</span>
    </div>
    </div>
  </body>
  <footer>
    <script src="ep.js"></script>
  </footer>
</html>

CSS

body {
  font-family: "Roboto Slab", serif;
  height: 100vh;
  padding: 0 15px;
  background: rgb(136, 0, 255);
  color: white;
}
#datafilter {
  width: 800px;
}
.output {

  width: 800px;
}
.selectallbutton {
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  width: 260px;
  cursor: pointer;
}
#checkBoxBlok {
  width: 200px;
  margin-bottom: 100px;
}
#regios,
#locaties,
.anchor {
  width: 100%;
}

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: white;
  margin-top: 5px;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid white;
  border-top: 2px solid white;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
}

.dropdown-check-list ul.items li {
  list-style: none;
  cursor: pointer;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

JavaScript

var alldata =
    [{ score: 1, regio: 'North', locatie: 'Alpha' },
    { score: 4, regio: 'North', locatie: 'Alpha' },
    { score: 2, regio: 'North', locatie: 'Bear' },
    { score: 3, regio: 'North', locatie: 'Clown' },
    { score: 4, regio: 'South', locatie: 'Dove' },
    { score: 3, regio: 'South', locatie: 'Egg' },
    { score: 2, regio: 'South', locatie: 'Ferret' },
    { score: 1, regio: 'South', locatie: 'Golf' }];

var regios = [
{ name: 'North', selected: true, visible:true }, 
{ name: 'South', selected: true,visible:true }];
var locaties = [
{ name: 'Alpha', selected: true,visible:true }, 
{ name: 'Bear', selected: true,visible:true }, 
{ name: 'Clown', selected: true,visible:true }, 
{ name: 'Dove', selected: true,visible:true }, 
{ name: 'Egg', selected: true,visible:true}, 
{ name: 'Ferret', selected: true,visible:true }, 
{ name: 'Golf', selected: true,visible:true }];

var app = new Vue({
    el: '#datafilter',
    data: {
        data: alldata,
        region_head: "Regions",
        town_head: "Towns",
        regios: regios,
        locaties: locaties
    },
    methods: {
      FilterData: function () {
            let filterGems = this.data;
            filterGems = filterGems.filter(Gem => {
                return this.regios.includes(Gem.regio);
            })
            filterGems = filterGems.filter(Gem => {
                return this.locaties.includes(Gem.locatie);
            })
            return filterGems;
        },
    
        adjustCheckBoxesRegions: function (event) {
            //let data = this.FilteredData;
            this.locaties = locaties.filter(Gem => {
                return locaties.includes(Gem.locatie);
            })
        },
        selectAll() {
            for (let i in this.regios) {
                this.regiogeselecteerd.push(this.regios[i].name);
                this.regiogeselecteerd = this.regiogeselecteerd.filter(onlyUnique);
                this.regiogeselecteerd.sort();
            }
           ...