How to enable the click to all looping images separately

38
January 12, 2019, at 2:00 PM

I creating the blog page, i looping the like button images according the total count of post using PHP example:(Facebook like button) here i'm facing the issues is php while loop is working but when i click first post image only working with click animation if i click second post like button also first post button only working i can't understand what is the issues. Please advice me or give solution how to fix this issues. i attached my code down.

  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); 
        } 
    }
    <?php 
                                           while($getPerPost=mysqli_fetch_assoc($result01)) 
     {   
       extract($getPerPost); 
    ?> 
        <input type="checkbox" id="checkbox-ins"/> 
          <label for="checkbox-ins"> 
            <svg id="heart-svg<?php echo $p_id; ?>" 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 
    } 
    ?>

Answer 1

You shouldn't change your svg class, instead you should generate unique classes for inputs and link them with labels. Also you should change all id selectors to class selectors, since your input isn't alone anymore. Here's updated fiddle with two working buttons:

  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); 
        } 
    }
           <input type="checkbox" class="checkbox-ins" id="input1"/> 
          <label for="input1"> 
            <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> 
 <input type="checkbox" class="checkbox-ins" id="input2"/> 
          <label for="input2"> 
            <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>

Answer 2

As @Elijah Ellanski touches on in his answer, the issue is related to your use of id's.

You are not supposed to have multiple instances of the same id, they need to be unique. By refactoring your code (both html and css) to use classes instead and using unique id's where necessary, you can solve this problem.

Here is my suggestion:

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); 
        } 
    }
<input type="checkbox" id="checkbox-ins<?php echo $p_id; ?>" class="checkbox-ins"/> 
          <label for="checkbox-ins<?php echo $p_id; ?>"> 
            <svg id="heart-svg<?php echo $p_id; ?>" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg" > 
            <g class="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" class="heart" fill="#AAB8C2"/>                                                                            <circle class="main-circ" fill="#ddd810" opacity="0" cx="29.5" cy="29.5" r="1.5"/> 
        <g class="grp7" opacity="0" transform="translate(7 6)">                                                                              <circle class="oval1" fill="#ddd810" cx="2" cy="6" r="2"/>                                                                             <circle class="oval2" fill="#ddd810" cx="5" cy="2" r="2"/> 
        </g> 
        <g class="grp6" opacity="0" transform="translate(0 28)">                                                                              <circle class="oval1" fill="#ddd810" cx="2" cy="7" r="2"/> 
        <circle class="oval2" fill="#ddd810" cx="3" cy="2" r="2"/> 
        </g> 
        <g class="grp3" opacity="0" transform="translate(52 28)">                                                                               <circle class="oval2" fill="#ddd810" cx="2" cy="7" r="2"/>                                                                            <circle class="oval1" fill="#ddd810" cx="4" cy="2" r="2"/> 
        </g> 
        <g class="grp2" opacity="0" transform="translate(44 6)">                                                                              <circle class="oval2" fill="#ddd810" cx="5" cy="6" r="2"/>                                                                             <circle class="oval1" fill="#ddd810" cx="2" cy="2" r="2"/>                                                                         </g> 
        <g class="grp5" opacity="0" transform="translate(14 50)">                                                                    <circle class="oval1" fill="#ddd810" cx="6" cy="5" r="2"/>                                                                             <circle class="oval2" fill="#ddd810" cx="2" cy="2" r="2"/>                                                                         </g> 
        <g class="grp4" opacity="0" transform="translate(35 50)">                                                                             <circle class="oval1" fill="#ddd810" cx="6" cy="5" r="2"/>                                                                            <circle class="oval2" fill="#ddd810" cx="2" cy="2" r="2"/>                                                                          </g> 
        <g class="grp1" opacity="0" transform="translate(24)">                                                                                <circle class="oval1" fill="#ddd810" cx="2.5" cy="3" r="2"/>                                                                                <circle class="oval2" fill="#ddd810" cx="7.5" cy="2" r="2"/>                                                                          </g> 
        </g> 
        </svg> 
        </label>
Working example: https://jsfiddle.net/a4sb7kv6/

Answer 3

    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); 
            } 
        }
<?php 
                                                   while($getPerPost=mysqli_fetch_assoc($result01)) 
             {   
               extract($getPerPost); 
            ?> 
                <input type="checkbox" id="checkbox-ins" class="checkbox-ins<?php echo $p_id; ?>"/> 
                  <label for="checkbox-ins<?php echo $p_id; ?>"> 
                    <svg id="heart-svg<?php echo $p_id; ?>" 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 
            } 
            ?>

READ ALSO
fetch other(custom) column with group by and count using laravel

fetch other(custom) column with group by and count using laravel

I want to fetch vacancies from the vacancies table

23
Returning data in html(firebase &amp; php - Firebase Admin SDK for PHP)

Returning data in html(firebase & php - Firebase Admin SDK for PHP)

I'm confused about the routing system in the Firebase Admin SDK for PHP, I want to display html pages, and have and direct users to different pages like like home, about, account, profile and ect but I don't know how to

45
How to calculate DF in TF-IDF with PHP

How to calculate DF in TF-IDF with PHP

I have a pseudocode about TF IDF, and i'm still confused how to calculate document frequency

42
Laravel working with collection filter and map

Laravel working with collection filter and map

I have a method where I can return the upcoming payment dateIn the below example, getNextDate() will return a Carbon date, like so:

54