Tengo código en el código del botón Me gusta con CSS aquí, solo funciona el botón medio de alimentación de noticias, pero el botón de publicación de noticias múltiples solo funciona si hago clic en otro botón de publicación y también funciona el primer botón de publicación. Utilizo la interfaz de usuario de la publicación y de acuerdo con el recuento total de publicaciones en bucle de la interfaz de usuario, para esta animación funciona completamente html con css que no utiliza Javascript, por favor, deme su opinión o consejos sobre cómo puedo solucionar este problem

ódigo @CSS:

svg {
    cursor: pointer;
    overflow: visible;
    width: 60px;
    margin: 0;
    margin-bottom: -45px;
}

svg #heart {
    transform-origin: center;
    animation: animateHeartOut .3s linear forwards;
}

svg #main-circ {
    transform-origin: 29.5px 29.5px;
}

#checkbox-ins {
    display: none;
}

#checkbox-ins:checked+label svg #heart {
    transform: scale(0.2);
    fill: #ddd810;
    animation: animateHeart .3s linear forwards .25s;
}

#checkbox-ins:checked+label svg #main-circ {
    transition: all 2s;
    animation: animateCircle .3s linear forwards;
    opacity: 1;
}

#checkbox-ins:checked+label svg #grp1 {
    opacity: 1;
    transition: .1s all .3s;
}

#checkbox-ins:checked+label svg #grp1 #oval1 {
    transform: scale(0) translate(0, -30px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}

#checkbox-ins:checked+label svg #grp1 #oval2 {
    transform: scale(0) translate(10px, -50px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}

#checkbox-ins:checked+label svg #grp2 {
    opacity: 1;
    transition: .1s all .3s;
}

#checkbox-ins:checked+label svg #grp2 #oval1 {
    transform: scale(0) translate(30px, -15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}

#checkbox-ins:checked+label svg #grp2 #oval2 {
    transform: scale(0) translate(60px, -15px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}

#checkbox-ins:checked+label svg #grp3 {
    opacity: 1;
    transition: .1s all .3s;
}

#checkbox-ins:checked+label svg #grp3 #oval1 {
    transform: scale(0) translate(30px, 0px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}

#checkbox-ins:checked+label svg #grp3 #oval2 {
    transform: scale(0) translate(60px, 10px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}

#checkbox-ins:checked+label svg #grp4 {
    opacity: 1;
    transition: .1s all .3s;
}

#checkbox-ins:checked+label svg #grp4 #oval1 {
    transform: scale(0) translate(30px, 15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}

#checkbox-ins:checked+label svg #grp4 #oval2 {
    transform: scale(0) translate(40px, 50px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}

#checkbox-ins:checked+label svg #grp5 {
    opacity: 1;
    transition: .1s all .3s;
}

#checkbox-ins:checked+label svg #grp5 #oval1 {
    transform: scale(0) translate(-10px, 20px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}

#checkbox-ins:checked+label svg #grp5 #oval2 {
    transform: scale(0) translate(-60px, 30px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}

#checkbox-ins:checked+label svg #grp6 {
    opacity: 1;
    transition: .1s all .3s;
}

#checkbox-ins:checked+label svg #grp6 #oval1 {
    transform: scale(0) translate(-30px, 0px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}

#checkbox-ins:checked+label svg #grp6 #oval2 {
    transform: scale(0) translate(-60px, -5px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}

#checkbox-ins:checked+label svg #grp7 {
    opacity: 1;
    transition: .1s all .3s;
}

#checkbox-ins:checked+label svg #grp7 #oval1 {
    transform: scale(0) translate(-30px, -15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}

#checkbox-ins:checked+label svg #grp7 #oval2 {
    transform: scale(0) translate(-55px, -30px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}

#checkbox-ins:checked+label svg #grp2 {
    opacity: 1;
    transition: .1s opacity .3s;
}

#checkbox-ins:checked+label svg #grp3 {
    opacity: 1;
    transition: .1s opacity .3s;
}

#checkbox-ins:checked+label svg #grp4 {
    opacity: 1;
    transition: .1s opacity .3s;
}

#checkbox-ins:checked+label svg #grp5 {
    opacity: 1;
    transition: .1s opacity .3s;
}

#checkbox-ins:checked+label svg #grp6 {
    opacity: 1;
    transition: .1s opacity .3s;
}

#checkbox-ins:checked+label svg #grp7 {
    opacity: 1;
    transition: .1s opacity .3s;
}

@keyframes animateCircle {
    40% {
        transform: scale(10);
        opacity: 1;
        fill: #ddd810;
    }
    55% {
        transform: scale(11);
        opacity: 1;
        fill: #ddd810;
    }
    65% {
        transform: scale(12);
        opacity: 1;
        fill: #ddd810;
    }
    75% {
        transform: scale(13);
        opacity: 1;
        fill: transparent;
        stroke: #ddd810;
        stroke-width: .5;
    }
    85% {
        transform: scale(17);
        opacity: 1;
        fill: transparent;
        stroke: #ddd810;
        stroke-width: .2;
    }
    95% {
        transform: scale(18);
        opacity: 1;
        fill: transparent;
        stroke: #ddd810;
        stroke-width: .1;
    }
    100% {
        transform: scale(19);
        opacity: 1;
        fill: transparent;
        stroke: #ddd810;
        stroke-width: 0;
    }
}

@keyframes animateHeart {
    0% {
        transform: scale(0.2);
    }
    40% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes animateHeartOut {
    0% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

Código HTML

<?php
 while($row->mysqli_fetch_assoc($newsfeed))
{
?>
<input type="checkbox" id="checkbox-ins"/>
                                                                        <label for="checkbox-ins">
                                                                          <svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg">
                                                                            <g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
                                                                              <path d="M25.82,40.35a1.67,1.67,0,0,0,.31.94l.94,1.36a1.8,1.8,0,0,0,1.36.73h3.24A1.76,1.76,0,0,0,33,42.65L34,41.29a1.69,1.69,0,0,0,
                                                                                       .32-.94v-2H25.92A13.27,13.27,0,0,0,25.82,40.35Zm-5-14.53a9.11,9.11,0,0,0,2.3,6.06,14.75,14.75,0,0,1,2.72,
                                                                                       4.81h8.36a16,16,0,0,1,2.72-4.81,8.92,8.92,0,0,0,2.3-6.06,9.2,9.2,0,0,0-18.4,0ZM30,21.64a4.19,4.19,0,0,0-4.18,4.18.9.9,0,0,
                                                                                       1-.84.84.89.89,0,0,1-.83-.84A5.84,5.84,0,0,1,30,20a.89.89,0,0,1,.84.83A.9.9,0,0,1,30,21.64Z" id="heart" fill="#AAB8C2"/>
                                                                              <circle id="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/>

                                                                              <g id="grp7" opacity="0" transform="translate(7 6)">
                                                                                <circle id="oval1" fill="#ddd810" cx="2" cy="6" r="2"/>
                                                                                <circle id="oval2" fill="#ddd810" cx="5" cy="2" r="2"/>
                                                                              </g>

                                                                              <g id="grp6" opacity="0" transform="translate(0 28)">
                                                                                <circle id="oval1" fill="#ddd810" cx="2" cy="7" r="2"/>
                                                                                <circle id="oval2" fill="#ddd810" cx="3" cy="2" r="2"/>
                                                                              </g>

                                                                              <g id="grp3" opacity="0" transform="translate(52 28)">
                                                                                <circle id="oval2" fill="#ddd810" cx="2" cy="7" r="2"/>
                                                                                <circle id="oval1" fill="#ddd810" cx="4" cy="2" r="2"/>
                                                                              </g>

                                                                              <g id="grp2" opacity="0" transform="translate(44 6)">
                                                                                <circle id="oval2" fill="#ddd810" cx="5" cy="6" r="2"/>
                                                                                <circle id="oval1" fill="#ddd810" cx="2" cy="2" r="2"/>
                                                                              </g>

                                                                              <g id="grp5" opacity="0" transform="translate(14 50)">
                                                                                <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/>
                                                                                <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/>
                                                                              </g>

                                                                              <g id="grp4" opacity="0" transform="translate(35 50)">
                                                                                <circle id="oval1" fill="#ddd810" cx="6" cy="5" r="2"/>
                                                                                <circle id="oval2" fill="#ddd810" cx="2" cy="2" r="2"/>
                                                                              </g>

                                                                              <g id="grp1" opacity="0" transform="translate(24)">
                                                                                <circle id="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/>
                                                                                <circle id="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/>
                                                                              </g>
                                                                            </g>
                                                                          </svg>
                                                                        </label>
<?php
}
?>