Почему в js стиль применяется только для одного элемента?

     <ul class="roulette_border"> 
        <?php 
        $rand_animate = rand(-3940, -4190); 
        for ($i = 0; $i < 50; $i++) { 
            $rand_num = array_rand($list_skins); 
            $rand_skins = ($list_skins[$rand_num]); 
            if ($i == 40) { 
                $rand_skins = $dropped_item = $skin; 
            } ?> 
            <li style="--r: <?= $rand_animate ?>px" class="roulette_items"> 
                <img src="https://" width="-1" height="-1" alt = "false|false"/>" alt="none" class="roulette_img"> 
                <h3 class="skins_title"><?= $rand_skins[1] ?></h3> 
                <h3 class="skins_name"><?= $rand_skins[2] ?></h3> 
                <span class="<?= $rand_skins[3] ?>"></span> 
            </li> 
        <?php } ?> 
    </ul> 
    <img src="https://" width="-1" height="-1" alt = "false|false"/>" alt="dropped_item"> 
 
    <script> 
        let roulette_items = document.querySelector('.roulette_items'); 
        let roulette_border = document.querySelector('.roulette_border'); 
        let dropped_item = document.querySelector('.dropped_item'); 
 
        roulette_items.addEventListener("animationend", function() { 
            roulette_border.style.display = 'none'; 
            dropped_item.style.opacity = '1'; 
            dropped_item.style.position = 'relative' 
 
        }); 
    </script>