Dynamic Tab Using shortcode

function tab_shortcode($atts){
    extract( shortcode_atts( array(
        'category' => '',
    ), $atts, 'tablist' ) );

    $q = new WP_Query(
        array('posts_per_page' => '10', 'post_type' => 'tab', 'tab_category' => $category, 'orderby' => 'meta_value','order' => 'ASC')
        );

    $list = '
    <script type="text/javascript">
    jQuery(function() {
    jQuery(".tabnav ul li:first-child")
        .addClass("active")
    });
    </script>
    <div class="col-12">
        <div class="tabs vertical row">
            <nav class="tabnav nav col-27">
                <ul>
    ';

    while($q->have_posts()) : $q->the_post();
        $idd = get_the_ID();
        $list .= '
            <li><a href="#">'.get_the_title().'</a></li>
        ';
    endwhile;
    $list.= '
                </ul>
            </nav>
    ';


    while($q->have_posts()) : $q->the_post();
        $idd = get_the_ID();
        $list .= '
            <div class="tab col-9">
                '.get_the_content().'
            </div>
        ';
    endwhile;
    $list.= '
        </div>
    </div>
    ';
    wp_reset_query();
    return $list;
}
add_shortcode('tab', 'tab_shortcode');