How to circumvent id selectors in a checkbox hack?

I've posted about this project before. Twice, actually. And while the answers have helped me to better understand my situation, they haven't really been applicable to my situation. I blame myself because I was posting a skeletal version of the final code which didn't fully illustrate what I needed to accomplish.

Essentially: I need to integrate a relatively simple checkbox hack into a CMS, but the CMS strips id selectors. Hence, code that ought to look something like this:

<input type="checkbox" name="thisisaname" id="thisisanid"><label class="thisisanid" for="thisisanid">Type 1</label>

...ends up like this:

<input type="checkbox" name="thisisaname"><label class="thisisanid" for="thisisanid">Type 1</label>

Predictably, this breaks everything, and ostensibly any adaptation appears to be impossible. There is no CMS-specific alternative like ClientID=. Neither jQuery nor JavaScript are available to me (they're also stripped out by the CMS).

It's a case of something being extraordinarily simple to do, but being constrained by a CMS that multiplies the difficulty to the point where I'm uncertain if it's even possible. I am not a CSS maven. I know it only as much as I need to do these little projects for a few friends, and I apologize for posting about this yet again, but it's driving me crazy not knowing if this is something which ought to be shelved.

This is the code. Obviously, it's sloppy and it isn't in its fully-styled form, but it's close enough that I think it's a better example than what I've posted in the past:

#basesurround {
  background: #000000cc;
  margin: 0 auto;
  width: 75%;
}

.information-wrap { display:flex; vertical-align:top;} 
.information-wrap aside { background: #00000066; vertical-align: top; flex: 1 1 250px; min-width: 150px; padding: 0; max-width: 200px; }
.information-wrap main { vertical-align: top; display: flex; flex-direction: row; flex-wrap: wrap; width: 85%; justify-content: center; padding: 0 0 25px 25px; }

.information-wrap label { background: #000000cc; width: 100%; display: inline-block; border-bottom: 1px solid #000000; color: #9FC3C9; text-transform: capitalize; font-weight: 100; font-size: 11px; letter-spacing: 1px; cursor: pointer; transition: all 0.7s ease; position: relative; padding: 10px 10px 10px 30px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-break: break-word; line-height: 125%; }
.information-wrap label:after { content: ""; width: 25px; height: 100%; position: absolute; left: 0; top: 0; background: #000000; filter: contrast(85%); }

.information-wrap details { position: relative; }

.information-wrap details summary::-webkit-details-marker { display: none; }

.information-wrap details summary::before { content: ""; position: absolute; left: 0; background: ; width: 1.5em; height: 1.5em; transition: transform 0.1s linear;}

.information-wrap summary { width: 100%; padding: 20px; padding-left: 25px; border-bottom: 1px solid #000000; background: #9FC3C9; font-family: Proxima; font-weight: 100; text-transform: uppercase; letter-spacing: 2px; color: #000000; -webkit-transition: all 1s ease; transition: all 1s ease; }

.information-wrap summary:hover { color: #ffffff4a; }

.information-wrap summary:focus {outline: none;}

.information-wrap details[open] > summary { background: #000000; filter: contrast(85%); color: #ffffff; }

.information-wrap details[open] > summary ~ * { animation: open 1s ease; }
.information-wrap details[open] summary:before {transform: rotate(90deg);}



.infocard { flex: 0 0 32.3%; display: inline-block; vertical-align: top; font-family: Proxima, Arial, Helvetica, Sans-Serif; position: relative; margin: .5%; align-items: center; justify-content: center; overflow: hidden; color: #000000; text-align: center; line-height: 160%; background-color: #141414; height: 300px; min-width: 300px; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; min-width:250px;  border: 1px solid #000000;}

.infocard figure { border: 10px solid #DADCDB; margin: 10px 10px; padding: 0; display: inline-block; position: relative;}
.infocard figure img { display: block; height: auto; max-width: 100%; } 
.infocard figcaption { color: #000000; font: 400 18px/26px Proxima, Arial, Helvetica, Sans-Serif; padding: .2em 0; position: absolute; bottom: 0; text-align: center; width: 100%; }
.infocard figcaption span { font-size: 14px; color: #ffffff }
.infocard:last-of-type {margin-bottom: 200px;}

.infocard .icons { top: -7px; position: relative; color:#ffffff}


.information-wrap input { display: none; }
input:checked ~ main .infocard { display: none; }


        /* INFOCARD TYPE LABELS & CHECK CONTROLS */


                /* TYPE SET #1 */


#infotypeone_cont:checked ~ aside .infotypeone_cont,
#infotypetwo_cont:checked ~ aside .infotypetwo_cont,
#infotypethree_cont:checked ~ aside .infotypethree_cont,
#infotypefour_cont:checked ~ aside .infotypefour_cont,
#infotypefive_cont:checked ~ aside .infotypefive_cont
{ background: #000000; filter: contrast(85%); }

#infotypeone_cont:checked ~ main .infotypeone,
#infotypetwo_cont:checked ~ main .infotypetwo,
#infotypethree_cont:checked ~ main .infotypethree,
#infotypefour_cont:checked ~ main .infotypefour,
#infotypefive_cont:checked ~ main .infotypefive
{display: inline-block;}


                /* TYPE SET #2 */


#factiontypeone_cont:checked ~ aside .factiontypeone_cont,
#factiontypetwo_cont:checked ~ aside .factiontypetwo_cont,
#factiontypethree_cont:checked ~ aside .factiontypethree_cont,
#factiontypefour_cont:checked ~ aside .factiontypefour_cont,
#factiontypefive_cont:checked ~ aside .factiontypefive_cont
{ background: #000000; filter: contrast(85%); }

#factiontypeone_cont:checked ~ main .factiontypeone,
#factiontypetwo_cont:checked ~ main .factiontypetwo,
#factiontypethree_cont:checked ~ main .factiontypethree,
#factiontypefour_cont:checked ~ main .factiontypefour,
#factiontypefive_cont:checked ~ main .factiontypefive
{display: inline-block;}





        /* TYPE COLORS #1 */


.infotypeone {background-color: #ff00004d;}
.infotypetwo {background-color: #0076ff4d;}
.infotypethree {background-color: #ffac004d;}
.infotypefour {background-color: #ff00fc4d;}
.infotypefive {background-color: #d800004d;}







        /* INFORMATION CARDS */


.infocard * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }

.infocard .background { width: 100%; vertical-align: top; opacity: 0.2; -webkit-filter: grayscale(100%) blur(10px); filter: grayscale(100%) blur(10px); -webkit-transition: all 2s ease; transition: all 2s ease; }

.infocard figcaption { width: 100%; padding: 15px 25px; position: absolute; left: 0; top: 50%; }

figure.infocard img { display: inline;}

figure.infocard .profile {border-radius: 50%; position: absolute; bottom: 50%; left: 50%; max-width: 100px; opacity: 1; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.5); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }

figure.infocard img.profile { height: 100px; width: 100px; }

figure.infocard h3 { line-height: 160%; margin: 0 0 5px; font-weight: 100; font-family: Proxima, Arial, Helvetica, Sans-Serif; text-transform: uppercase; text-indent: 0px; }
figure.infocard h3 a { text-decoration: none; letter-spacing: .3em; color: #9FC3C9cc; line-height: 18px; font-size: 15px; -webkit-transition: all 1s ease; transition: all 1s ease; }
figure.infocard h3 a:hover {opacity: .3; }
figure.infocard h3 span a, figure.infocard h3 span { font-size: 8px; opacity: 0.75; letter-spacing: 2px; display: inline-block; line-height: 10px; }

figure.infocard i { padding: 10px 5px; display: inline-block; font-size: 32px; color: #ffffff; text-align: center; opacity: 0.65;}
figure.infocard a {text-decoration: none; background-size: 0;}
figure.infocard i:hover {opacity: 1; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; }
figure.infocard:hover .background, figure.infocard.hover .background {-webkit-transform: scale(1.3);transform: scale(1.3);}

<div id="basesurround">
<form>
<div class="information-wrap">



<!--- BEGIN INFORMATION CONTROLLER :: CHECKBOX --->



  <input type="checkbox" name="cont" id="infotypeone_cont">
  <input type="checkbox" name="cont" id="infotypetwo_cont">
  <input type="checkbox" name="cont" id="infotypethree_cont">
  <input type="checkbox" name="cont" id="infotypefour_cont">
  <input type="checkbox" name="cont" id="infotypefive_cont">

  <input type="checkbox" name="cont" id="factiontypeone_cont">
  <input type="checkbox" name="cont" id="factiontypetwo_cont">
  <input type="checkbox" name="cont" id="factiontypethree_cont">
  <input type="checkbox" name="cont" id="factiontypefour_cont">
  <input type="checkbox" name="cont" id="factiontypefive_cont">  

<!--- END INFORMATION CONTROLLER :: CHECKBOX --->



  <aside>
    


<!--- BEGIN INFORMATION CONTROLLER :: LABELS --->



    <details><summary>
      

      SUBMENU TITLE
     
 
     </summary>

      
      <label class="infotypeone_cont" for="infotypeone_cont">Check 1</label>
      <label class="infotypetwo_cont" for="infotypetwo_cont">Check 2</label>
      <label class="infotypethree_cont" for="infotypethree_cont">Check 3</label>
      <label class="infotypefour_cont" for="infotypefour_cont">Check 4</label>
      <label class="infotypefive_cont" for="infotypefive_cont">Check 5</label>


    </details>

<!--- END INFORMATION CONTROLLER :: LABELS --->

<!--- BEGIN INFORMATION CONTROLLER --->

    <details><summary>
      

      SUBMENU TITLE
     
 
     </summary>

      
      <label class="factiontypeone_cont" for="factiontypeone_cont">Faction 1</label>
      <label class="factiontypetwo_cont" for="factiontypetwo_cont">Faction 2</label>
      <label class="factiontypethree_cont" for="factiontypethree_cont">Faction 3</label>
      <label class="factiontypefour_cont" for="factiontypefour_cont">Faction 4</label>
      <label class="factiontypefive_cont" for="factiontypefive_cont">Faction 5</label>


    </details>
<!--- END INFORMATION CONTROLLER --->
    
  </aside>
  
  <main>

        <!---  BEGIN INFORMATION CARD --->
<figure class="infocard infotypeone factiontypeone">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

                        <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
                        <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
                        <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
        <!---  END INFORMATION CARD --->

        <!---  BEGIN INFORMATION CARD --->
<figure class="infocard infotypetwo factiontypetwo">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

                        <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
                        <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
                        <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
        <!---  END INFO CARD --->

        <!---  BEGIN INFO CARD --->
<figure class="infocard infotypethree factiontypethree">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

                        <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
                        <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
                        <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
        <!---  END INFO CARD --->

        <!---  BEGIN INFO CARD --->
<figure class="infocard infotypefour factiontypefour">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

                        <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
                        <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
                        <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
        <!---  END INFO CARD --->

        <!---  BEGIN INFO CARD --->

<figure class="infocard infotypefive factiontypefive">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

                        <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
                        <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
                        <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
        <!---  END INFO CARD --->

</main></div>
</form></div>

I am in a quandary. I'm not very knowledgeable in CSS, and this CMS (which I must use, unfortunately) makes even the easiest of tasks inordinately difficult. Here's what I've tried:

• Using nth-child / nth-of-type selectors: I was given this idea by Temani Afif. This solution is elegant and I loved it, but unfortunately, because of what the code will be used for, the structure will vary often.

• Placing the input above the labels: I've been advised to look into this, but I can't find any information on how to properly code with the input above the label, so I'm unsure if it can be used in this
  situation.

• I thought about mimicking the behavior I want using [attribute|=value] selectors instead of id, but I haven't been able to get it to work. I don't know, though, whether I'm being limited by the code or my own incompetence, so I'm unsure if it's something worth looking into further.

So… Is there a recommended means of overcoming the id= limitations I've missed in my research?

FWIW, the purpose of this is to create a simple(ish) code where it's easy to append the INFO CARD part of the code as many times as needed to edit this for sorting movies/books/other information of that nature, while maintaining the ease at which one can change the figure class=.