Best approach using a list in Thymeleaf adding to a Bootstrap accordion by a nested value

I have a list of discgolf rounds for a user, to display them I want an accordion for each course, then as you select the course all rounds for that course are displayed and can be collapsed. I can get the accordion working but the problem is each score is its own accordion. Question should I have a list of a list of rounds, or would just the shown list of rounds work?

Below is my data (getAllRoundsByUserId), my controller with rounds/{id} (id=userId) method and my html.

Data getAllRoundsByUserId (sorry if it looks complicated, a round has a date, total, score (List of Score) and a course(name, record, par, List of Hole)

[Round{roundId=19, course=Course{id=1, name='Legende', holes=[Hole{holeId=37, number=1, par=3}, Hole{holeId=38, number=2, par=3}, Hole{holeId=39, number=3, par=3}, Hole{holeId=40, number=4, par=3}, Hole{holeId=41, number=5, par=3}, Hole{holeId=42, number=6, par=3}, Hole{holeId=43, number=7, par=3}, Hole{holeId=44, number=8, par=3}, Hole{holeId=45, number=9, par=3}], par=27, record=-2}, scores=[Score{scoreId=181, score=2, holePar=3}, Score{scoreId=182, score=4, holePar=3}, Score{scoreId=183, score=4, holePar=3}, Score{scoreId=184, score=2, holePar=3}, Score{scoreId=185, score=3, holePar=3}, Score{scoreId=186, score=2, holePar=3}, Score{scoreId=187, score=3, holePar=3}, Score{scoreId=188, score=3, holePar=3}, Score{scoreId=189, score=3, holePar=3}], roundDate=2023-03-04 00:00:00.0, total=26}, Round{roundId=20, course=Course{id=1, name='Legende', holes=[Hole{holeId=37, number=1, par=3}, Hole{holeId=38, number=2, par=3}, Hole{holeId=39, number=3, par=3}, Hole{holeId=40, number=4, par=3}, Hole{holeId=41, number=5, par=3}, Hole{holeId=42, number=6, par=3}, Hole{holeId=43, number=7, par=3}, Hole{holeId=44, number=8, par=3}, Hole{holeId=45, number=9, par=3}], par=27, record=-2}, scores=[Score{scoreId=190, score=4, holePar=3}, Score{scoreId=191, score=4, holePar=3}, Score{scoreId=192, score=3, holePar=3}, Score{scoreId=193, score=3, holePar=3}, Score{scoreId=194, score=3, holePar=3}, Score{scoreId=195, score=3, holePar=3}, Score{scoreId=196, score=4, holePar=3}, Score{scoreId=197, score=3, holePar=3}, Score{scoreId=198, score=3, holePar=3}], roundDate=2023-03-04 00:00:00.0, total=30}, Round{roundId=21, course=Course{id=2, name='Ilsede', holes=[Hole{holeId=46, number=1, par=3}, Hole{holeId=47, number=2, par=3}, Hole{holeId=48, number=3, par=3}, Hole{holeId=49, number=4, par=3}, Hole{holeId=50, number=5, par=3}, Hole{holeId=51, number=6, par=3}, Hole{holeId=52, number=7, par=3}, Hole{holeId=53, number=8, par=3}, Hole{holeId=54, number=9, par=3}, Hole{holeId=55, number=10, par=3}, Hole{holeId=56, number=11, par=3}, Hole{holeId=57, number=12, par=3}, Hole{holeId=58, number=13, par=4}, Hole{holeId=59, number=14, par=3}, Hole{holeId=60, number=15, par=3}, Hole{holeId=61, number=16, par=3}, Hole{holeId=62, number=17, par=3}, Hole{holeId=63, number=18, par=3}], par=55, record=7}, scores=[Score{scoreId=199, score=3, holePar=3}, Score{scoreId=200, score=3, holePar=3}, Score{scoreId=201, score=3, holePar=3}, Score{scoreId=202, score=4, holePar=3}, Score{scoreId=203, score=3, holePar=3}, Score{scoreId=204, score=3, holePar=3}, Score{scoreId=205, score=2, holePar=3}, Score{scoreId=206, score=3, holePar=3}, Score{scoreId=207, score=3, holePar=3}, Score{scoreId=208, score=4, holePar=3}, Score{scoreId=209, score=3, holePar=3}, Score{scoreId=210, score=3, holePar=3}, Score{scoreId=211, score=2, holePar=3}, Score{scoreId=212, score=3, holePar=3}, Score{scoreId=213, score=3, holePar=3}, Score{scoreId=214, score=4, holePar=3}, Score{scoreId=215, score=3, holePar=3}, Score{scoreId=216, score=2, holePar=3}], roundDate=2023-03-01 00:00:00.0, total=54}]

Controller method

@GetMapping("/rounds/{id}")
    public String roundsHome(@PathVariable(value = "id") Long id,
                             Model model) {
        List<Course> courses = courseService.getAllCourses();
        List<Round> rounds = userService.getUserById(id).getRounds();
        model.addAttribute("courses", courses);
        model.addAttribute("rounds", rounds);
        return "/discgolf/round/rounds";
    }

html

<div class="container">
    <div>
        <a>Rounds Played</a>
    </div>
        <div id="accordion">
            <div th:each="round : ${rounds}" class="card">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <div>
                                <label>Course: </label>
                                <label th:text="${round.course.name}"></label>
                            </div>
                        </button>
                    </h5>
                </div>

                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <div class="d-flex flex-row">
                            <div class="p-3">
                                <label>Date: </label>
                                <label th:text="${#dates.format(round.roundDate, 'dd-MMM-yyyy')}"></label>
                            </div>
                            <div class="p-3">
                                <label>Score: </label>
                                <label th:text="${round.total - round.course.par}"></label>
                            </div>
                        </div>

                        <br>
                        <div >
                            <table id="courseInfo" class="table table-bordered w-auto">
                                <th:block th:each="course : ${round.course}">
                                    <tr>
                                        <th th:text="${'Hole'}"></th>
                                        <th th:each="hole : ${course.holes}" th:text="${hole.number}"></th>
                                        <th th:text="${'Total'}"></th>
                                    </tr>
                                    <tr>
                                        <td th:text="${'Par'}"></td>
                                        <td th:each="par : ${course.holes}" th:text="${par.par}"></td>
                                        <td th:text="${course.par}"></td>
                                    </tr>
                                    <tr>
                                        <td th:text="${'Score'}"></td>
                                        <th:block th:each="score : ${round.scores}">

                                            <td th:style="${score.score > score.holePar}
                                        ? 'background-color: red'
                                        : (${score.score < score.holePar } ? 'background-color: blue'
                                        : 'background-color: #eee' ) " th:text="${score.score}"></td>
                                        </th:block>
                                        <td th:text="${round.total}"></td>
                                    </tr>
                                </th:block>
                            </table>
                            <br>
                            <a th:href="@{/discgolf/deleteRound/{id}(id=${round.roundId})}" title="Remove Course"
                               data-target="#deleteRoundModal" class="table-link danger" id="deleteRoundButton" >
                    <span id="deleteRound" class="fa-stack">
                        <i class="fa fa-square fa-stack-2x"></i>
                        <i class="fa fa-trash-o fa-stack-1x fa-inverse" title="Delete this round"></i>
                    </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

So I figured it out with using a Map. For other beginners this is great to learn.

 @GetMapping("/rounds/{id}")
    public String roundsHome(@PathVariable(value = "id") Long id,
                             Model model) {
        List<Course> courses = courseService.getAllCourses();
        List<Round> rounds = userService.getUserById(id).getRounds();
        
        Map<Course, List<Round>> mapRoundsByCourse = rounds.stream().collect(Collectors.groupingBy(Round::getCourse));

        model.addAttribute("courses", courses);
        model.addAttribute("rounds", mapRoundsByCourse);
        return "/discgolf/round/rounds";
    }

Then I used the bottom answer here to render in my accordion.