Jquery .Change() doesnt change on click

I have two checkboxes with labels, and attached each one jQuery change() handler to the display:none, checkboxes via their ids. If I click on the label to change the "checked" status of the checkboxes the event fires every time, but doesn't change the status every time.

You can close the opened div by clicking outside, pressing esc or the close element ( X ). every time the checked status is changed back to "false" so that it should change to "checked" on the next click.

You can see, that the event fires by seeing that the console.log is showing the checked status of the checkboxes on each click. But only every second click the value changes?

function close_explain_box(event) {
  let close_cont = event.data.close_cont;
  if ($(event.target).closest(close_cont).length) {
    return;
  } else if (!$(event.target).closest(close_cont).length || event.which === 27) {
    infomark_checkbox_all.prop("checked", false);
    close_cont.css("display", "none");
    gesamt_product_cont.removeClass("lessopa");
    document_var.off('click keyup', close_explain_box);
  }
}

const gesamt_product_cont = $(".contain_me");
const document_var = $(document);

if ($(".explain_box").length) {
  let close_cont_array = $(".explain_box");
  var infomark_checkbox_all = $("#infomark #infomark_ts");
  close_cont_array.each(function(index) {
    if (close_cont_array[index].classList.contains("exp_pers")) {
      var close_cont = $(".exp_pers");
      var infomark_checkbox = $("#infomark");
    } else if (close_cont_array[index].classList.contains("exp_konfmain")) {
      var close_cont = $(".exp_konfmain");
      var infomark_checkbox = $("#infomark_ts");
    }

    infomark_checkbox.change(function(event) {
      console.log(infomark_checkbox.is(":checked"));
      if (infomark_checkbox.is(":checked")) {
        close_cont.css("display", "flex");
        if (!gesamt_product_cont.hasClass("lessopa")) {
          gesamt_product_cont.addClass("lessopa");
        }
        document_var.on('click keyup', {
          close_cont: close_cont
        }, close_explain_box);
      } else if (!infomark_checkbox.is(":checked")) {
        infomark_checkbox_all.prop("checked", false);
        close_cont.css("display", "none");
        gesamt_product_cont.removeClass("lessopa");
        document_var.off('click keyup', close_explain_box);
      }

    });
    index++;
  });

  $(".close").click(function() {
    infomark_checkbox_all.prop("checked", false);
    close_cont_array.css("display", "none");
    gesamt_product_cont.removeClass("lessopa");
    document_var.off('click keyup', close_explain_box);
    console.log(infomark_checkbox_all.is(":checked"));
  });
}

var infomark_checkbox_all = $("#infomark #infomark_ts");

.infomark_checkbox {
  display: none;
}

.contain_me {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.infomark {
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

.infomark:hover {
  background: black;
  color: white;
}

.explain_box {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 10%;
  width: 50%;
  height: auto;
  z-index: 10000;
  transition: all 0.35s;
  padding: 2.5rem;
  border: 1px solid #ccc;
  border-radius: 0;
  background: white;
  box-shadow: 0px 1px 10px 0px #434242;
}

.closeline1,
.closeline2 {
  height: 12.5%;
  background: black;
  border-radius: 2px;
  display: block;
  transition: 0.5s;
  transform-origin: left;
}

.closeline1 {
  transform: rotate(45deg);
}

.closeline2 {
  transform: rotate(-45deg);
}

.close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  cursor: pointer;
  z-index: 110000;
}

.closeline1,
.closeline2 {
  width: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contain_me">
  <input class="infomark_checkbox" id="infomark_ts" type="checkbox" name="infomark" value="">
  <label class="infomark" for="infomark_ts">&#63; 1</label>
</div>

<div class="contain_me">
  <input class="infomark_checkbox" id="infomark" type="checkbox" name="infomark" value="">
  <label class="infomark" for="infomark">&#63; 2</label>
</div>

<div class="explain_box exp_pers">
  <p>blablablabal</p>
  <div class="close">
    <span class="closeline1"></span>
    <span class="closeline2"></span>
  </div>
</div>

<div class="explain_box exp_konfmain">
  <p>blablablabal</p>
  <div class="close">
    <span class="closeline1"></span>
    <span class="closeline2"></span>
  </div>
</div>