Pure CSS Checkbox with JS toggle not working

Searched all over the internet, and I can't beat this issue.

I have a pricing section with a pricing plan switch. The logic itself is working fine, however, the CSS checkbox toggle itself isn't switching from left to right.

I assume it has to do with the CSS itself or the way I select the elements with JS. I've also read some topics on SO where they say that it's a checkbox issue with WordPress, didn't find my answer there, unfortunately.

The issue

1. On Chrome desktop, the CSS checkbox toggle isn't working.
2. On Safari, iPhone X the CSS checkbox switch checkbox does work but only if you click the label elements with text

Here's a link to the page

Link to Dropbox of me demonstrating the issue on iPhone

---

The code:

    window.onload=function(){

var e = document.getElementById("firstPlan"),
    d = document.getElementById("secondPlan"),
    t = document.getElementById("switcher_iOS"),
    m = document.getElementById("firstPlan_box"),
    y = document.getElementById("secondPlan_box");

if(document.getElementById("switcher_iOS") == null){
   var node = document.createElement("input");             
       node.id = "switcher_iOS";
       node.type = "checkbox";
       node.className = "toggle_iOS--check";
   var elm = document.getElementsByClassName('toggle_iOS')[0];

    elm.insertBefore(node, elm.firstChild)
   t = document.getElementById("switcher_iOS");
}

e.addEventListener("click", function(){
  t.checked = false;
  e.classList.add("togglePricing--is-active");
  d.classList.remove("togglePricing--is-active");
  m.classList.remove("hide");
  y.classList.add("hide");
});

d.addEventListener("click", function(){
  t.checked = true;
  d.classList.add("togglePricing--is-active");
  e.classList.remove("togglePricing--is-active");
  m.classList.add("hide");
  y.classList.remove("hide");
});

t.addEventListener("click", function(){
  d.classList.toggle("togglePricing--is-active");
  e.classList.toggle("togglePricing--is-active");
  m.classList.toggle("hide");
  y.classList.toggle("hide");
  t.checked = !t.checked;
})
      }

And CSS:

/* Toggle */

#switcher_iOS {
  width: 100%;
}
.toggle_iOS,
.togglePricing {
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}
.togglePricing {
  color: #ccc9c9;
  cursor: pointer;
  transition: .1s;
  font-weight: bold;
  font-size: 17px;
}
.togglePricing--is-active {
  color: #181818;
}

.toggle_iOS {
  position: relative;
  width: 58px;
  height: 28px;
  border-radius: 100px;
  background-color: #1D8BF1;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}
.toggle_iOS--check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}
.toggle_iOS--check:checked ~ .toggle_iOS--switch {
  right: 2px;
  left: 57.5%;
  transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: .01s, 0s;
}
.toggle_iOS--switch {
  position: absolute;
  left: 2px;
  top: 2px;
  cursor: pointer;
  bottom: 2px;
  right: 57.5%;
  background-color: #fff;
  border-radius: 36px;
  z-index: 1;
  transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: 0s, .01s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

Markup

<label class="togglePricing togglePricing--is-active" id="firstPlan">Payment Plan</label>

<div class="toggle_iOS">
<label for="switcher_iOS"><input type="checkbox" onclick="void(0);" id="switcher_iOS" class="toggle_iOS--check" checked></label><b onclick="void(0);" class="toggle_iOS--switch"></b>
</div>

<label class="togglePricing" id="secondPlan">One Payment</label>