<style>
        #full-stars-example .rating-group {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        }

        #full-stars-example .rating__icon {
        pointer-events: none;
        }

        #full-stars-example .rating__input {
        position: absolute !important;
        left: -9999px !important;
        }

        #full-stars-example .rating__label {
        cursor: pointer;
        padding: 0 0.1em;
        font-size: 2rem;
        }

        #full-stars-example .rating__icon--star {
        color: orange;
        }

        #full-stars-example .rating__icon--none {
        color: #eee;
        }

        #full-stars-example .rating__input--none:checked + .rating__label .rating__icon--none {
        color: red;
        }

        #full-stars-example .rating__input:checked ~ .rating__label .rating__icon--star {
        color: #ddd;
        }

        #full-stars-example .rating-group:hover .rating__label .rating__icon--star {
        color: orange;
        }

        #full-stars-example .rating__input:hover ~ .rating__label .rating__icon--star {
        color: #ddd;
        }

        #full-stars-example .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
        color: #eee;
        }

        #full-stars-example .rating__input--none:hover + .rating__label .rating__icon--none {
        color: red;
        }
    </style>
    <div class="card-group">
        <div class="card">
            <div class="card-body text-center">
                <h5>ให้คะแนนคอร์สนี้</h5>
                <div id="full-stars-example">
                    <div class="rating-group">
                        <label aria-label="1 star" class="rating__label" for="rating-1"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                        <input class="rating__input" name="rating" id="rating-1" value="1" type="radio">
                        <label aria-label="2 stars" class="rating__label" for="rating-2"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                        <input class="rating__input" name="rating" id="rating-2" value="2" type="radio">
                        <label aria-label="3 stars" class="rating__label" for="rating-3"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                        <input class="rating__input" name="rating" id="rating-3" value="3" type="radio">
                        <label aria-label="4 stars" class="rating__label" for="rating-4"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                        <input class="rating__input" name="rating" id="rating-4" value="4" type="radio">
                        <label aria-label="5 stars" class="rating__label" for="rating-5"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                        <input class="rating__input" name="rating" id="rating-5" value="5" type="radio" onclick="getRating(this)">
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5>คะแนนของคอร์ส</h5>
                <div class="row">
                    <div class="col-4 text-center">
                        <div class="">
                            <h1>5</h1>
                            <div style="font-size: .5em;color: gold">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p style="font-size: .7em">99</p>
                        </div>
                    </div>
                    <div class="col-8 text-center">
                        <table>
                            <tbody style="font-size: .8em">
                                <tr>
                                    <td style="line-height: 14px">5</td>
                                    <td style="width: 100%">
                                        <div class="progress" style="height: 5px">
                                            <div class="progress-bar" style="width: 100%;"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="line-height: 14px">4</td>
                                    <td style="width: 100%">
                                        <div class="progress" style="height: 5px">
                                            <div class="progress-bar" style="width: 0%;"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="line-height: 14px">3</td>
                                    <td style="width: 100%">
                                        <div class="progress" style="height: 5px">
                                            <div class="progress-bar" style="width: 0%;"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="line-height: 14px">2</td>
                                    <td style="width: 100%">
                                        <div class="progress" style="height: 5px">
                                            <div class="progress-bar" style="width: 0%;"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="line-height: 14px">1</td>
                                    <td style="width: 100%">
                                        <div class="progress" style="height: 5px">
                                            <div class="progress-bar" style="width: 0%;"></div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>