Checkbox toggle with two different properties

I have a list of different entries which all have two properties, attributes to categorize them : data-one and data-two in my example.

These divs can be toggled according to these properties by clicking on checkboxes.

I'm however experiencing an issue :

• When clicking on a checkbox for the first time, the divs toggle fine.
• When clicking on a checkbox of the second navigation after the first step, since the command is toggle, all the divs that were toggled with the first click and have the second click attribute are toggled back.

It doesn't make much sense like this but here's a simple example to understand better :

/*---- Content of entries ----*/

$(".entry").each(function() {

  var one = $(this).attr("data-one"),
    two = $(this).attr("data-two");

  $(this).html("My data-one is <span>" + one + "</span> and my data-two is <span>" + two + "</span>");
});


/*--- Fix button ---*/

$("button.fix").on("click", function() {
  $(".entry")
    .show()
    .end()
    .not(".shown")
    .addClass("shown");
  $("input[type=checkbox]").prop("checked", true);
});


/*--- Toggle entries ---*/

$(".button[data-one]").on("click", function() {
  var checkBoxes = $(this).children("input[type=checkbox]");
  checkBoxes.prop("checked", !checkBoxes.prop("checked"));

  var whichData = $(this).attr("data-one");

  $(".entry")
    .filter("[data-one='" + whichData + "']")
    .slideToggle("slow")
    .toggleClass("shown")
  /*
    .end()
    .filter("[data-one!='" + whichData + "']")
    .not(".shown")
    .hide()
  */
  ;
});

$(".button[data-two]").on("click", function() {
  var checkBoxes = $(this).children("input[type=checkbox]");
  checkBoxes.prop("checked", !checkBoxes.prop("checked"));

  var whichData = $(this).attr("data-two");

  $(".entry")
    .filter("[data-two='" + whichData + "']")
    .slideToggle("slow")
    .toggleClass("shown")
  /*
    .end()
    .filter("[data-two!='" + whichData + "']")
    .not(".shown")
    .hide()
  */
  ;
});

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: white;
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  text-align: center;
  color: black;
}

.nav {
  height: 180px;
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}

.nav label {
  display: flex;
  margin: 10px;
  cursor: pointer;
}

.button {
  position: relative;
  float: left;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background-color: #606062;
  background-image: linear-gradient(#474749, #606062);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
}

.button svg {
  position: absolute;
  top: 3px;
  left: 3px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transform: translate3d(0, 0, 0);
}

.button+span {
  float: left;
  margin-left: 6px;
}

.nav input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.nav input[type="checkbox"]:checked+.button {
  background-color: #606062;
  background-image: linear-gradient(#255cd2, #1d52c1);
}

.nav input[type="checkbox"]:checked+.button svg {
  stroke-dashoffset: 0;
  transition: all 0.15s ease;
}

.container {
  margin-top: 5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-around;
}

.entry {
  width: 20vw;
  height: 20vh;
  border: 2px solid;
  margin: 5px;
}

.entry span {
  font-weight: 900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

  <header>
    <div class="nav">

      <button class="fix">
    Fix (show everything)
    </button>
      <div class="navigation">

        <h2>Data-one</h2>

        <label for="ex1">
          <input type="checkbox" id="ex1" checked>
          <span class="button" data-one="1">
            <svg width="12px" height="11px" viewBox="0 0 12 11">
              <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
            </svg>
          </span>
          <span>Example 1</span>
        </label>

        <label for="ex2">
          <input type="checkbox" id="ex2" checked>
          <span class="button" data-one="2">
            <svg width="12px" height="11px" viewBox="0 0 12 11">
              <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
            </svg>
          </span>
          <span>Example 2</span>
        </label>

        <label for="ex3">
          <input type="checkbox" id="ex3" checked>
          <span class="button" data-one="3">
            <svg width="12px" height="11px" viewBox="0 0 12 11">
              <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
            </svg>
          </span>
          <span>Example 3</span>
        </label>

        <label for="ex4">
          <input type="checkbox" id="ex4" checked>
          <span class="button" data-one="4">
            <svg width="12px" height="11px" viewBox="0 0 12 11">
              <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
            </svg>
          </span>
          <span>Example 4</span>
        </label>

      </div>


      <div class="navigation">

        <h2>Data-two</h2>

        <label for="ex5">
          <input type="checkbox" id="ex5" checked>
          <span class="button" data-two="5">
            <svg width="12px" height="11px" viewBox="0 0 12 11">
              <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
            </svg>
          </span>
          <span>Example 5</span>
        </label>

        <label for="ex6">
          <input type="checkbox" id="ex6" checked>
          <span class="button" data-two="6">
            <svg width="12px" height="11px" viewBox="0 0 12 11">
              <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
            </svg>
          </span>
          <span>Example 6</span>
        </label>

        <label for="ex7">
          <input type="checkbox" id="ex7" checked>
          <span class="button" data-one="7">
            <svg width="12px" height="11px" viewBox="0 0 12 11">
              <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
            </svg>
          </span>
          <span>Example 7</span>
        </label>

        <label for="ex8">
          <input type="checkbox" id="ex8" checked>
          <span class="button" data-one="8">
            <svg width="12px" height="11px" viewBox="0 0 12 11">
              <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
            </svg>
          </span>
          <span>Example 8</span>
        </label>

      </div>


    </div>
  </header>


  <div class="container">
    <div class="entry shown" data-one="1" data-two="6">
    </div>
    <div class="entry shown" data-one="3" data-two="6">
    </div>
    <div class="entry shown" data-one="2" data-two="5">
    </div>
    <div class="entry shown" data-one="1" data-two="7">
    </div>
    <div class="entry shown" data-one="1" data-two="5">
    </div>
    <div class="entry shown" data-one="4" data-two="8">
    </div>
    <div class="entry shown" data-one="3" data-two="6">
    </div>
    <div class="entry shown" data-one="2" data-two="7">
    </div>
    <div class="entry shown" data-one="4" data-two="7">
    </div>
    <div class="entry shown" data-one="4" data-two="8">
    </div>
    <div class="entry shown" data-one="3" data-two="5">
    </div>
    <div class="entry shown" data-one="1" data-two="6">
    </div>
    <div class="entry shown" data-one="2" data-two="6">
    </div>
  </div>

</div>

Is there a better way to for example have the two properties in a single dom or maybe using something like isotope (even though i'd rather not...) ?

Thanks for your help! :)