Поворот блоков JS. Код должен переворачивать все карты, но по нажатию кнопки - переворачивает только первую, помогите

 <style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        position: relative;
        flex-wrap: wrap;
        perspective: 600px;

    }

    #card {
        /* поворачивать будем общий контейнер */
        width: 150px;
        height: 190px;

        transition: transform 0.5s;
        /* трансформации будут происходить анимированно продолжительностью 0.5 сек */
        transform-style: preserve-3d;
        /* указываем, что дочерние элементы находятся в 3D пространстве */

    }

    #card.flip {
        /* добавляя этот класс, поворачиваем контейнер на 180 градусов */
        transform: rotateY(180deg);

    }

    figure {
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        backface-visibility: hidden;
        /* если элемент "отвернулся" от пользователя, контент этого элемента не виден */

    }

    .back {

        background: url(img/rubashka.png);
        width: 150px;
        height: 190px;

    }

    .front {
        background: url(img/kB.jpg);
        width: 150px;
        height: 190px;
        transform: rotateY(180deg);
        /* в начальном положении фэйс карты к нам развернут на 180 градусов */

    }

    .c1 {
        width: 140px;
        display: flex;
        margin: auto;
    }

    .c2 {
        width: 600px;
        display: flex;
        margin-left: 38.6%;
    }

    .c3 {
        width: 800px;
        display: flex;
        margin: auto;
        margin-left: 30.7%;
    }

    .c4 {
        width: 1200px;
        display: flex;
        margin: auto;
        margin-left: 22.9%;
    }

</style>



<div class="container" id="container">


        <div class="c1">
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/1.jpg"></figure>
            </div>
        </div>
        <div class="c2">
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/2.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/3.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/4.jpg"></figure>
            </div>
        </div>
        <div class="c3">
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/5.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/6.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/7.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/8.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/9.jpg"></figure>
            </div>
        </div>
        <div class="c4">
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/10.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/11.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/12.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/13.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/14.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/15.jpg"></figure>
            </div>
            <div id="card">
                <figure class="back"><img src="img/rubashka.png"></figure>
                <figure class="front"><img src="img/16.jpg"></figure>
            </div>
        </div>

    </div>




<input type="button" value="Start" id="button">

<script>
    var btn = document.getElementById("button");
    var smena = document.getElementById("card");
    btn.onclick = function() {
        smena.classList.toggle("flip");
    }

</script>