Как перевернуть выбранную карточку

У меня на сайте есть список карточек , я хочу реализовать чтобы при клике на выбранную карточку она переворачивалась.

<div class="card" style="width: 18rem; height: 20rem;" onclick="name();" >
            <div class=" front ">
                <div class="card-body">
                <h5 class="card-title">{{ task.title }}
                    {% if task.is_active %}
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15pt" height="15pt" viewBox="0 0 15 15" version="1.1">
                            <g id="surface1">
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(46.666667%,81.960784%,70.196078%);fill-opacity:1;" d="M 2.875 2.210938 C 3.074219 2.121094 3.265625 2.023438 3.433594 1.902344 C 4.039062 1.460938 4.453125 0.601562 5.183594 0.363281 C 5.882812 0.136719 6.722656 0.582031 7.5 0.582031 C 8.277344 0.582031 9.117188 0.136719 9.816406 0.363281 C 10.546875 0.601562 10.960938 1.460938 11.566406 1.902344 C 12.179688 2.347656 13.121094 2.480469 13.566406 3.089844 C 14.007812 3.695312 13.847656 4.632812 14.082031 5.359375 C 14.3125 6.0625 15 6.722656 15 7.5 C 15 8.277344 14.3125 8.9375 14.082031 9.640625 C 13.847656 10.367188 14.007812 11.304688 13.566406 11.910156 C 13.121094 12.519531 12.179688 12.652344 11.566406 13.097656 C 10.960938 13.539062 10.546875 14.398438 9.816406 14.636719 C 9.117188 14.863281 8.277344 14.417969 7.5 14.417969 C 6.722656 14.417969 5.882812 14.863281 5.183594 14.636719 C 4.453125 14.398438 4.039062 13.539062 3.433594 13.097656 C 2.820312 12.652344 1.878906 12.519531 1.433594 11.910156 C 0.992188 11.304688 1.152344 10.367188 0.917969 9.640625 C 0.6875 8.9375 0 8.277344 0 7.5 C 0 6.722656 0.6875 6.0625 0.917969 5.359375 C 1.152344 4.632812 0.992188 3.695312 1.433594 3.089844 C 1.574219 2.898438 1.761719 2.753906 1.976562 2.628906 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(96.078431%,96.078431%,96.078431%);fill-opacity:1;" d="M 13.578125 7.5 C 13.578125 8.128906 13.019531 8.664062 12.835938 9.234375 C 12.644531 9.824219 12.777344 10.582031 12.417969 11.074219 C 12.058594 11.570312 11.292969 11.679688 10.796875 12.039062 C 10.304688 12.394531 9.96875 13.09375 9.378906 13.285156 C 8.808594 13.46875 8.128906 13.109375 7.5 13.109375 C 6.871094 13.109375 6.191406 13.46875 5.621094 13.285156 C 5.03125 13.09375 4.695312 12.394531 4.203125 12.039062 C 3.707031 11.679688 2.941406 11.570312 2.582031 11.074219 C 2.222656 10.582031 2.355469 9.824219 2.164062 9.234375 C 1.980469 8.664062 1.421875 8.128906 1.421875 7.5 C 1.421875 6.871094 1.980469 6.335938 2.164062 5.765625 C 2.355469 5.175781 2.222656 4.417969 2.582031 3.925781 C 2.941406 3.429688 3.707031 3.320312 4.203125 2.960938 C 4.695312 2.605469 5.03125 1.90625 5.621094 1.714844 C 6.191406 1.53125 6.871094 1.890625 7.5 1.890625 C 8.128906 1.890625 8.808594 1.53125 9.378906 1.714844 C 9.96875 1.90625 10.304688 2.605469 10.796875 2.960938 C 11.292969 3.320312 12.058594 3.429688 12.417969 3.925781 C 12.777344 4.417969 12.644531 5.175781 12.835938 5.765625 C 13.019531 6.335938 13.578125 6.871094 13.578125 7.5 Z M 13.578125 7.5 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(40.392157%,70.980392%,62.352941%);fill-opacity:1;" d="M 14.082031 5.359375 C 13.847656 4.632812 14.007812 3.695312 13.566406 3.089844 C 13.121094 2.480469 12.179688 2.347656 11.566406 1.902344 C 10.960938 1.460938 10.546875 0.601562 9.816406 0.363281 C 9.519531 0.269531 9.199219 0.292969 8.867188 0.351562 C 8.882812 0.355469 8.898438 0.359375 8.914062 0.363281 C 9.640625 0.601562 10.054688 1.460938 10.660156 1.902344 C 11.273438 2.347656 12.21875 2.480469 12.664062 3.089844 C 13.101562 3.695312 12.941406 4.632812 13.175781 5.359375 C 13.40625 6.0625 14.09375 6.722656 14.09375 7.5 C 14.09375 8.277344 13.40625 8.9375 13.175781 9.640625 C 12.941406 10.367188 13.101562 11.304688 12.664062 11.910156 C 12.21875 12.519531 11.273438 12.652344 10.660156 13.097656 C 10.054688 13.539062 9.640625 14.398438 8.914062 14.636719 C 8.898438 14.640625 8.882812 14.644531 8.867188 14.648438 C 9.199219 14.707031 9.519531 14.730469 9.816406 14.636719 C 10.546875 14.398438 10.960938 13.539062 11.566406 13.097656 C 12.179688 12.652344 13.121094 12.519531 13.566406 11.910156 C 14.007812 11.304688 13.847656 10.367188 14.082031 9.640625 C 14.3125 8.9375 15 8.277344 15 7.5 C 15 6.722656 14.3125 6.0625 14.082031 5.359375 Z M 14.082031 5.359375 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(93.72549%,91.372549%,94.509804%);fill-opacity:1;" d="M 12.835938 5.765625 C 12.644531 5.175781 12.777344 4.417969 12.417969 3.925781 C 12.058594 3.429688 11.292969 3.320312 10.796875 2.960938 C 10.304688 2.605469 9.96875 1.90625 9.378906 1.714844 C 9.105469 1.628906 8.808594 1.664062 8.5 1.726562 C 9.074219 1.929688 9.410156 2.609375 9.890625 2.960938 C 10.386719 3.320312 11.152344 3.429688 11.511719 3.925781 C 11.871094 4.417969 11.738281 5.175781 11.929688 5.765625 C 12.117188 6.335938 12.675781 6.871094 12.675781 7.5 C 12.675781 8.128906 12.117188 8.664062 11.929688 9.234375 C 11.738281 9.824219 11.871094 10.582031 11.511719 11.074219 C 11.152344 11.570312 10.386719 11.679688 9.890625 12.039062 C 9.410156 12.390625 9.074219 13.070312 8.5 13.273438 C 8.808594 13.335938 9.105469 13.371094 9.378906 13.285156 C 9.96875 13.09375 10.304688 12.394531 10.796875 12.039062 C 11.292969 11.679688 12.058594 11.570312 12.417969 11.074219 C 12.777344 10.582031 12.644531 9.824219 12.835938 9.234375 C 13.019531 8.664062 13.578125 8.128906 13.578125 7.5 C 13.578125 6.871094 13.019531 6.335938 12.835938 5.765625 Z M 12.835938 5.765625 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(57.254902%,87.843137%,76.862745%);fill-opacity:1;" d="M 5.957031 9.933594 L 4.832031 8.582031 C 4.664062 8.375 4.691406 8.074219 4.894531 7.902344 L 5.210938 7.640625 C 5.414062 7.472656 5.714844 7.5 5.886719 7.703125 L 6.453125 8.386719 C 6.585938 8.546875 6.835938 8.558594 6.980469 8.402344 L 9.875 5.578125 C 10.058594 5.386719 10.363281 5.378906 10.554688 5.5625 L 10.851562 5.84375 C 11.042969 6.027344 11.050781 6.332031 10.867188 6.523438 L 7.371094 9.980469 C 6.980469 10.390625 6.316406 10.367188 5.957031 9.933594 Z M 5.957031 9.933594 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(46.666667%,81.960784%,70.196078%);fill-opacity:1;" d="M 10.851562 5.84375 L 10.554688 5.5625 C 10.363281 5.378906 10.058594 5.386719 9.875 5.578125 L 9.769531 5.679688 L 9.945312 5.84375 C 10.136719 6.027344 10.144531 6.332031 9.960938 6.523438 L 6.464844 9.980469 C 6.394531 10.054688 6.316406 10.113281 6.230469 10.160156 C 6.597656 10.359375 7.066406 10.300781 7.371094 9.980469 L 10.867188 6.523438 C 11.050781 6.332031 11.042969 6.027344 10.851562 5.84375 Z M 10.851562 5.84375 "/>
                            </g>
                            </svg>
                        {% elif task.is_wait %}
                    
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15pt" height="15pt" viewBox="0 0 15 15" version="1.1">
                            <g id="surface1">
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 12.5 3.015625 L 12.5 1.699219 C 12.871094 1.484375 13.125 1.085938 13.125 0.625 L 13.125 0.3125 C 13.125 0.140625 12.984375 0 12.8125 0 L 2.1875 0 C 2.015625 0 1.875 0.140625 1.875 0.3125 L 1.875 0.625 C 1.875 1.085938 2.128906 1.484375 2.5 1.703125 L 2.5 3.015625 C 2.5 4.253906 3.027344 5.441406 3.949219 6.269531 L 5.316406 7.5 L 3.949219 8.730469 C 3.027344 9.558594 2.5 10.746094 2.5 11.984375 L 2.5 13.296875 C 2.128906 13.515625 1.875 13.914062 1.875 14.375 L 1.875 14.6875 C 1.875 14.859375 2.015625 15 2.1875 15 L 12.8125 15 C 12.984375 15 13.125 14.859375 13.125 14.6875 L 13.125 14.375 C 13.125 13.914062 12.871094 13.515625 12.5 13.296875 L 12.5 11.984375 C 12.5 10.746094 11.972656 9.558594 11.050781 8.730469 L 9.683594 7.5 L 11.050781 6.269531 C 11.972656 5.441406 12.5 4.253906 12.5 3.015625 Z M 10.214844 5.339844 L 8.332031 7.035156 C 8.199219 7.152344 8.125 7.324219 8.125 7.5 C 8.125 7.675781 8.199219 7.847656 8.332031 7.964844 L 10.214844 9.660156 C 10.871094 10.25 11.25 11.097656 11.25 11.984375 L 11.25 13.125 L 10.46875 13.125 L 7.75 9.5 C 7.632812 9.34375 7.367188 9.34375 7.25 9.5 L 4.53125 13.125 L 3.75 13.125 L 3.75 11.984375 C 3.75 11.097656 4.128906 10.25 4.785156 9.660156 L 6.667969 7.964844 C 6.800781 7.847656 6.875 7.675781 6.875 7.5 C 6.875 7.324219 6.800781 7.152344 6.667969 7.035156 L 4.785156 5.339844 C 4.128906 4.75 3.75 3.902344 3.75 3.015625 L 3.75 1.875 L 11.25 1.875 L 11.25 3.015625 C 11.25 3.902344 10.871094 4.75 10.214844 5.339844 Z M 10.214844 5.339844 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 9.652344 4.375 L 5.347656 4.375 C 5.222656 4.375 5.109375 4.449219 5.058594 4.5625 C 5.011719 4.675781 5.03125 4.804688 5.113281 4.898438 L 7.289062 6.90625 C 7.351562 6.957031 7.425781 6.984375 7.5 6.984375 C 7.574219 6.984375 7.648438 6.957031 7.710938 6.90625 L 9.886719 4.898438 C 9.96875 4.804688 9.988281 4.675781 9.941406 4.5625 C 9.890625 4.449219 9.777344 4.375 9.652344 4.375 Z M 9.652344 4.375 "/>
                            </g>
                            </svg>
                        {% else %}
                        
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15pt" height="15pt" viewBox="0 0 15 15" version="1.1">
                            <g id="surface1">
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(88.627451%,91.372549%,93.333333%);fill-opacity:1;" d="M 14.707031 7.5 C 14.707031 11.480469 11.480469 14.707031 7.5 14.707031 C 3.519531 14.707031 0.292969 11.480469 0.292969 7.5 C 0.292969 3.519531 3.519531 0.292969 7.5 0.292969 C 11.480469 0.292969 14.707031 3.519531 14.707031 7.5 Z M 14.707031 7.5 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,49.019608%,59.215686%);fill-opacity:1;" d="M 13.300781 7.5 C 13.300781 10.703125 10.703125 13.300781 7.5 13.300781 C 4.296875 13.300781 1.699219 10.703125 1.699219 7.5 C 1.699219 4.296875 4.296875 1.699219 7.5 1.699219 C 10.703125 1.699219 13.300781 4.296875 13.300781 7.5 Z M 13.300781 7.5 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 3.867188 6.445312 L 11.132812 6.445312 L 11.132812 8.554688 L 3.867188 8.554688 Z M 3.867188 6.445312 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 2.402344 2.695312 C 2.328125 2.695312 2.25 2.664062 2.195312 2.609375 C 2.140625 2.554688 2.109375 2.480469 2.109375 2.402344 C 2.109375 2.328125 2.140625 2.25 2.195312 2.195312 C 2.25 2.140625 2.328125 2.109375 2.402344 2.109375 C 2.480469 2.109375 2.554688 2.140625 2.609375 2.195312 C 2.664062 2.25 2.695312 2.328125 2.695312 2.402344 C 2.695312 2.480469 2.664062 2.554688 2.609375 2.609375 C 2.554688 2.664062 2.480469 2.695312 2.402344 2.695312 Z M 2.402344 2.695312 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 7.5 15 C 5.496094 15 3.613281 14.21875 2.195312 12.804688 C 0.78125 11.386719 0 9.503906 0 7.5 C 0 5.972656 0.457031 4.503906 1.320312 3.25 C 1.410156 3.117188 1.59375 3.082031 1.726562 3.175781 C 1.859375 3.265625 1.894531 3.449219 1.800781 3.582031 C 1.007812 4.738281 0.585938 6.09375 0.585938 7.5 C 0.585938 11.3125 3.6875 14.414062 7.5 14.414062 C 11.3125 14.414062 14.414062 11.3125 14.414062 7.5 C 14.414062 3.6875 11.3125 0.585938 7.5 0.585938 C 6.09375 0.585938 4.738281 1.007812 3.582031 1.800781 C 3.449219 1.894531 3.265625 1.859375 3.175781 1.726562 C 3.082031 1.59375 3.117188 1.410156 3.25 1.320312 C 4.503906 0.457031 5.972656 0 7.5 0 C 9.503906 0 11.386719 0.78125 12.804688 2.195312 C 14.21875 3.613281 15 5.496094 15 7.5 C 15 9.503906 14.21875 11.386719 12.804688 12.804688 C 11.386719 14.21875 9.503906 15 7.5 15 Z M 7.5 15 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 7.5 13.59375 C 4.140625 13.59375 1.40625 10.859375 1.40625 7.5 C 1.40625 4.140625 4.140625 1.40625 7.5 1.40625 C 10.859375 1.40625 13.59375 4.140625 13.59375 7.5 C 13.59375 10.859375 10.859375 13.59375 7.5 13.59375 Z M 7.5 1.992188 C 4.464844 1.992188 1.992188 4.464844 1.992188 7.5 C 1.992188 10.535156 4.464844 13.007812 7.5 13.007812 C 10.535156 13.007812 13.007812 10.535156 13.007812 7.5 C 13.007812 4.464844 10.535156 1.992188 7.5 1.992188 Z M 7.5 1.992188 "/>
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 11.132812 8.847656 L 3.867188 8.847656 C 3.707031 8.847656 3.574219 8.714844 3.574219 8.554688 L 3.574219 6.445312 C 3.574219 6.285156 3.707031 6.152344 3.867188 6.152344 L 11.132812 6.152344 C 11.292969 6.152344 11.425781 6.285156 11.425781 6.445312 L 11.425781 8.554688 C 11.425781 8.714844 11.292969 8.847656 11.132812 8.847656 Z M 4.160156 8.261719 L 10.839844 8.261719 L 10.839844 6.738281 L 4.160156 6.738281 Z M 4.160156 8.261719 "/>
                            </g>
                            </svg> 
                        {% endif %}
                </h5>
                <p class="card-text">{{task.short_description}}...</p>
                </div>
                <a href="{{project.id}}/task/{{task.id}}" class="btn btn-primary link-task">Перейти к задаче</a>
            </div>
            <div class="back ">
                <p>123</p>
            </div>
        </div>
  

Это скрипт который обрабатывает клик на карточку но у меня получается либо перевернуть первую, либо все сразу

<script type="text/javascript">
var card = document.querySelector('.card');
    function name(){
    console.log("1")
    card.classList.toggle('is-flipped');
    }
    
    </script>