PHP Image used as radio button does not retain checked state/does not submit as checked

Question

GOAL: style images uses as radio buttons to properly select thier given state-of-choice: unselected, hover, checked/clicked/selected.

PROBLEM: The clicked state only appears clicked while clicking the image, once checked/clicked (selected), it visually reverts back to the unchecked/unclicked (unselected) state.

BUG IDENTIFICATION: I beleive that the radio button is not holding/retaining/submitting the checked (selected) radio button state

THE ASK: I am looking for guidance on how to resolve this so that I can have a selectable image act as a radio button.

#  st   character posting select
$staging .= '
    <style>
    /* HIDE RADIO */
    [type=radio] { 
        position: absolute;
        opacity:  0;
        width:    0;
        height:   0;
        }
    
    /* IMAGE STYLES */
    [type=radio] + img {
        cursor: pointer;
        }
    
    /* CHECKED STYLES */
    [type=radio]:checked + img {
        outline: 2px solid #f00;
        }
    </style>
    
    
    <div class="  ma-none   bg-white  pr-20px">
    
    <style>
        label.lbl_imgCONTAINER img.lbl_imgCONTAINER {
            width:      100% !important;
            margin:     10px 0px 10px 10px !important;
            padding:    0 !important;
            
            opacity:    .4 !important;
            filter:     grayscale(100%);
            }
        
        input[type=radio] {
            display:    none 0.6 !important;;
            }
        
        label.lbl_imgCONTAINER img.lbl_imgCONTAINER:hover {
            opacity:    0.6 !important;
            filter:     grayscale(40%);
            cursor:     pointer;
            }
        
        label.lbl_imgCONTAINER img.lbl_imgCONTAINER:active {
            opacity:    1 !important;
            filter:     grayscale(0%);
            cursor:     pointer;
            }
        
        input[type=radio]:checked + label.lbl_imgCONTAINER > img.lbl_imgCONTAINER {
            border:     20px solid  rgb(228, 207, 94) !important;
            opacity:    1  !important;
        }
    </style>
    ';


    #  st characters availalbe to me
    #  st  arr  =>  handle sorting/alphabetizing of characters
    $a___sortCHARACTERS = [];
    foreach($a___charactersALL  as $myCHAR){
        $temp = [];
        if($my_id == $myCHAR["co_userID"]){  
            #  if match -- show character
            #$staging .= '<option   value="'.$myCHAR["co_charID"].'">  '.$myCHAR["co_codename"].'  </option>';
            #  push to array
            $a___temp = [
            'approved'      =>  $myCHAR["co_approved"],
            'cID'           =>  $myCHAR["co_charID"  ],
            'name'          =>  $myCHAR["co_codename"],
            'type'          =>  $myCHAR["co_PCorPC"  ]
            ];
            array_push($a___sortCHARACTERS, $a___temp);
        }//if  =>  st  array  sortign
    }//foreach =>  gt  characters if any
    #  sort   arr   alphabetically
    $columns = array_column($a___sortCHARACTERS, 'name');
    array_multisort($columns, SORT_ASC, $a___sortCHARACTERS);
    #  list   characters   ALPHABETICALLY
    foreach($a___sortCHARACTERS  as $myCHAR){
        #if($my_id == $myCHAR["co_userID"]){  
        #       #  if match -- show character
        #       $staging .= '<option   value="'.$myCHAR["co_charID"].'">  '.$myCHAR["co_codename"].'  </option>';
        #}
        #           <option   value="'.$myCHAR["cID"].'">  '.$myCHAR["name"].'  </option>
        $staging .= '
        <input  type="radio"   name="characterID" id="choose-'.$myCHAR["cID"].'"   value="'.$myCHAR["cID"].'"/>
        <label  class="lbl_imgCONTAINER"   for="choose-'.$myCHAR["cID"].'">
            <img  src="../a___assets/img/placeholders/placeholder_lsSEARCH-1.webp"    class="lbl_imgCONTAINER">
        </label>
        ';
    }
#  btn_bg-select-character-0.webp
$staging .= '
    </div>
    ';
       return   $staging;
}