script filter feedback

<div class="rating-feedback">
    <div class="rating-option">
        <div class="rating-point" th:text="${departmentFeedbacks.avgRating} + ' trên 5'"></div>
        <button type="button" class="btn btn-warning" style="margin-left: 70px;" onclick="filterFeedbacks('all')">
            Tất cả (<span th:text="${departmentFeedbacks.total}"></span>)
        </button>
        <button type="button" class="btn btn-warning" onclick="filterFeedbacks(5)">
            5 sao (<span th:text="${departmentFeedbacks.total5}"></span>)
        </button>
        <button type="button" class="btn btn-warning" onclick="filterFeedbacks(4)">
            4 sao (<span th:text="${departmentFeedbacks.total4}"></span>)
        </button>
        <button type="button" class="btn btn-warning" onclick="filterFeedbacks(3)">
            3 sao (<span th:text="${departmentFeedbacks.total3}"></span>)
        </button>
        <button type="button" class="btn btn-warning" onclick="filterFeedbacks(2)">
            2 sao (<span th:text="${departmentFeedbacks.total2}"></span>)
        </button>
        <button type="button" class="btn btn-warning" onclick="filterFeedbacks(1)">
            1 sao (<span th:text="${departmentFeedbacks.total1}"></span>)
        </button>
    </div>
</div>

<div class="user-ratings">
    <!-- Iterate over the userFeedbacks list and generate the HTML for each feedback -->
    <div th:each="feedback : ${userFeedbacks}" class="user-rating" th:classappend="${feedback.rating} + '-star'">
        <div class="user-rating-avatar">
            <img style="width: 60px; margin: auto;" src="https://cdn-icons-png.flaticon.com/128/4333/4333609.png">
        </div>
        <div class="user-rating-description">
            <div th:text="${feedback.userId}"></div>
            <i style="height: 20px;" th:attr="data-star=${feedback.rating}"></i>
            <div th:text="${feedback.feedbackTime}"></div>
            <div th:text="${feedback.comments}"></div>
        </div>
    </div>
</div>

<script>
    function filterFeedbacks(rating) {
        if (rating === 'all') {
            $('.user-rating').show(); // Show all feedbacks
        } else {
            $('.user-rating').hide(); // Hide all feedbacks
            $('.' + rating + '-star').show(); // Show feedbacks with the selected rating
        }
    }
</script>