bootstrap tab

<div>
    <!-- Nav tabs -->
    <ul id="deshboardTabs" class="nav nav-tabs" role="tablist">
        <?php foreach ($takenCourse as $course) : ?>
        <li role="presentation" class="course-nav" data-code="<?php echo $course->courseCode;?>">
            <a href="<?php echo urlencode($course->courseCode);?>" aria-controls="<?php echo $course->courseCode?>" role="tab" data-toggle="tab"
            > <?php echo $course->vendorName.' : '.$course->courseCode;?> </a>
        </li>
        <?php endforeach;?>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <?php foreach ($takenCourse as $item):?>
        <div role="tabpanel" class="tab-pane" id="<?php echo $item->courseCode;?>">
            <div class="panel panel-default">
                <div class="panel-heading">Exam Score</div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-sm table-bordered">
                            <thead>
                            <tr>
                                <th>Exam</th>
                                <th>Taken</th>
                                <th class="text-right">Latest Score</th>
                                <th class="text-right">Avg. Score</th>
                                <th class="text-right">Max Score</th>
                                <th>Avg. Time</th>
                                <th>Last Taken</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php
                            $helpers = new Helpers();
                            foreach($score as $row):
                                if ($row->course_name == $item->courseName) {
                                    echo '<tr>'
                                            . '<td>' . $row->exam_name . '</td>'
                                            . '<td>' . $row->number_of_time_taken . ' Times</td>'
                                            . '<td class="text-right">' . $row->last_score . '</td>'
                                            . '<td class="text-right">' . $row->avg_score . '</td>'
                                            . '<td class="text-right">' . $row->max_score . '</td>'
                                            . '<td>' . $helpers->seconds2time($row->avg_time_taken) . '</td>'
                                            . '<td>' . date('Y-d-m H:i', strtotime($row->taken_at)) . '</td>'
                                            . '</tr>';
                                }
                            endforeach;
                            ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">Score of Recent Exam</div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-sm table-bordered">
                            <thead>
                            <tr>
                                <th>Serial</th>
                                <th>Vendor Name</th>
                                <th>Exam Name</th>
                                <th>Course Name</th>
                                <th>Score</th>
                                <th>Time Taken</th>
                                <th>Taken At</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php foreach ($recentScore as $score) :
                                if ($score->courseName == $item->courseName) {
                                ?>
                                <tr class="recent-score-table">
                                    <td class="text-right"></td>
                                    <td> <?php echo $score->vendorName; ?> </td>
                                    <td> <?php echo $score->examName; ?> </td>
                                    <td> <?php echo $score->courseName; ?> </td>
                                    <td class="text-right"> <?php echo $score->score; ?> </td>
                                    <td> <?php echo $helpers->seconds2time($score->time_taken); ?> </td>
                                    <td> <?php echo date('Y-d-m H:i', strtotime($score->taken_at)); ?> </td>
                                </tr>
                            <?php }
                            endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach;?>
    </div>
</div>

<script>
$('.tab-pane').first().addClass('active');
$('.course-nav').first().addClass('active');
$('.nav-tabs li').on('click', function (event) {
    event.preventDefault();
    $('.nav-tabs li').removeClass('active');
    $(this).addClass('active');
    $('.tab-content div').hide();
    $('#' + $(this).data('code')).tab('show');
});
</script>