Frage Checkboxen Status durch andere Checkbox ändern

[Chrigodth]

[Offtopic]
Hi, ich bin noch etwas neu was CSS angeht. Java garkeine Ahnung, nur ein bisschen Schul-C# gehabt.

[Umgebung]
Apache Server + MysqlAdmin + bootstrap

[Absicht](Anlage: Wunschlage.png)
Ich hab eine Musikalbenübersicht und ich möchte sie Smartphone-Ready machen. Mein Hauptproblem liegt an den Flip-Cards die ich gebaut habe. Diese funktionieren über Checkboxen, die leider von einander unabhängig sind. Ich möchte eig. kein Java benutzen, weil es damit noch komplizierter wird.

Normal wird ein Albumcover, sowie Albumname + Interpret angezeigt.(Anlage: Ausgangslage.png)
So und wenn ich eine anklicke kommt jetzt ein Menü zum bearbeiten, löschen und Songs anzeigen. Wenn ich das nächste Album aber stattdessen anklicken will, soll wieder die Flip-box-front des vorherigen Albums angezeigt werden und nicht das Menü auf der Flip-box-back.

[IST-Zustand](Anlage: Fail.png)
Im Grunde bin ich diesem Beispiel gefolgt(

https://codepen.io/RuudBurger/pen/bwjry

) und mit jedem neuen Album wird eine neue flip-box erstellt.
#Listeneinträge per Schleife

 for($i=0;$i<count($AlbenListe);$i++)

Flip-box Front:

<label>

             <div class="flip-box">
            //eig. flip-box-front, aber dann funktioniert es erst recht nicht. Eigens erstelltes CSS weiter unten
                            <div class="flip-box-inner">
                                <input type="checkbox">
                            <div class="card">
                                <div  class="flip-box">';                    
                                    {Musikalbumvorschau}oder Text rein schreiben;                                      
                                   <p>'. $AlbenListe[$i]['Albumname'].'<br> von '.$AlbenListe[$i]['Interpret'].'</p>

                         </div><!--flip-box-front-->
    </label>


//Flip-box Rückseite
<div class="flip-box-back">

                                    <ul class="list-group list-group-flush">
                                          <li>
                                                    Menüpunkt Songs anzeigen

                                                    Menüpunkt Album bearbeiten
                        
                                                    Menüpunkt Album löschen

                                                     Menüpunkt Albumdetails

                                            </li>       

                            echo' </ul>  //list-group bootstrap.css Ende                           
</div><!--flip-box-back-->

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 0px solid #f1f1f1;
  perspective: 100px; /* Remove this if you don't want the 3D effect */
}

.flip-box-back {

  display: block!important;
}

/* FlipBox Optionen Allgemein // This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 5.8s;
  /*transform-style: preserve-3d;*/
}

label :checked + .card {
    transform: rotateX(180deg);
}

/* Style the front side */
.flip-box-front {
  background-color: transparent;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: white;
  color: white;
  transform: rotateX(180deg);
}

 

[Chrigodth]

Ok danke. das hat funktioniert!