30개의 열이 있는 li를 만들어주고 10개만 보여지게 노출시켜줘. 그리고 1초에 1줄씩 올라가는 html, css, jquery를 만들어줘

					<?php

// Enqueue jQuery in your WordPress plugin
function wpturbo_enqueue_scripts() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'wpturbo_enqueue_scripts' );

// Create the shortcode to display the list
function wpturbo_display_list() {
    ob_start();
    ?>
    <div class="scrolling-list">
        <ul>
            <?php for ( $i = 1; $i <= 30; $i++ ) : ?>
                <li>
                    <div class="item-date"><?php echo esc_html( "2023-10-{$i}" ); ?></div>
                    <div class="item-name"><?php echo esc_html( "이름 {$i}" ); ?></div>
                    <div class="item-type"><?php echo esc_html( "희망차종 {$i}" ); ?></div>
                    <div class="item-model"><?php echo esc_html( "차종이름 {$i}" ); ?></div>
                    <div class="item-consultation"><?php echo esc_html( "상담여부 " . ( $i % 2 === 0 ? "완료" : "진행중" ) ); ?></div>
                </li>
            <?php endfor; ?>
        </ul>
    </div>

    <style>
        .scrolling-list {
            height: 150px; /* Adjust height to show 10 items */
            overflow: hidden;
            position: relative;
        }

        .scrolling-list ul {
            padding: 0;
            margin: 0;
            position: absolute;
            top: 0;
            transition: top 0.5s;
        }

        .scrolling-list li {
            list-style: none;
            height: 30px; /* Adjust height to prevent cutting off content */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 10px;
            box-sizing: border-box;
        }

        .scrolling-list div {
            white-space: nowrap; /* Prevent text from wrapping */
            overflow: hidden;
            text-overflow: ellipsis; /* Add ellipsis for overflowing text */
        }
    </style>

    <script>
        jQuery(document).ready(function ($) {
            let totalItems = $('.scrolling-list li').length;
            let currentIndex = 0;

            function scrollList() {
                currentIndex++;
                if (currentIndex >= totalItems) {
                    currentIndex = 0; // Reset to the top
                }
                $('.scrolling-list ul').css('top', -(currentIndex * 30) + 'px'); // Adjust the value (30) to the height of your li
            }

            setInterval(scrollList, 1000); // Scroll every second
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode( 'wpturbo_scrolling_list', 'wpturbo_display_list' );