Checkbox array (square brackets) - all have the same name and 'checked' is not working

I have a number of checkboxes that return an array of data to PHP. They are all named 'Plans[]' but with different IDs.

I have a CSS checkbox styler that replaces the usual HTML checkbox with something more fancy...

When the page is displayed, there is one (or several) that are 'checked', but they don't display as checked (I think one does but that is hidden usually).

I am assuming that the problem is caused by them all having the same name and so somehow they are the checked attribute is not getting acted on for all of them for this reason. I have tried wrapping each of them in their own forms (as I saw this suggested elsewhere) but to no avail.

Here's an example of what it looks like:

<style type="text/css">
.checkOpt input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: -.3em;
  right: 5%;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 20%;
  border: 1px;
  border-color: #1e62d0;
  border-style: dashed;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  font-weight: 900;
  color: blue;
  margin-top: -11px;
  margin-left: -3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  content: "\2714";
  position: absolute;
  display: none;
}


/* Style the indicator (dot/circle) */
.checkOpt .checkmark:after {
    top: 8px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    
    /* background: white; */
    text-shadow: -1px -1px 0 #7f7f7f, 1px -1px 0 #7f7f7f, -1px 1px 0 #7f7f7f, 1px 1px 0 #7f7f7f;
}

/* Show the indicator (dot/circle) when checked */

.checkOpt input:checked~.checkmark:after {
  display: block;
}

/* On mouse-over, add a grey background color */
.checkOpt:hover input ~ .checkmark {
  background-color: #97c4fe;
}
/* When the radio button is checked, add a blue background */
.checkOpt input:checked ~ .checkmark {
  background-color: #2196F3;
}
.checkOpt input:disabled ~ .checkmark {
  background-color:#b0c7df; pointer:default;
}

.test {
  position: relative;
  height:60px;
}
</style>

<div class="test">
  <div class="checkOpt" style="top:20px;">
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line - OFNL" id="12" value="0.00" checked="checked" >              
                  <span class="checkmark"></span>
          </label>
  </div>
</div>
<div  class="test">
  <div class="checkOpt" >
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Paper Bill" id="35" value="2.00" >              
                  <span class="checkmark"></span>
           </label>
  
  </div>
</div>
<div  class="test">
  <div class="checkOpt">
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line " id="12" value="0.00" checked="checked" disabled="disabled">              
                  <span class="checkmark"></span>
          </label>
  
  </div>
</div>

...only one of these (the first) is showing as checked - the rest are not. Does anyone have any ideas what I might do to get round this (without coding changes to the subsequent data collection if possible!)

tried everything I can think of and would welcome any suggestions....