How iterate by one after another in Thymeleaf- Spring - Boot?

Question

How can we iterate a list on Thymeleaf page? Suppose I have a list which contains an object

I am able to display all the user info one after another on the Thymeleaf page, but this is actually what I don't want to implement. Is there any way so that I can display one user at a time and there will be two buttons on the next button click move to the next available user and display info and hide the previous user info and when the previous button is clicked move back to previous one. As I more than 20+ or even sometimes 50+ users information.

public class Info {
private String name;
private String dob;
private String university;
// constructor , getter and setter
}

my controller class

@GetMapping("/get/All-user-info")
public String getAllUserInfo(Model model){
  List<Info> info = new ArrayList<>();
info.add(new Info("NA","22/02/2020","Florida"));
info.add(new Info("PA","22/01/2020","Florida"));
info.add(new Info("CA","22/03/2020","Florida"));
info.add(new Info("DA","22/04/2020","Florida"));
model.addAttribute("info",info);
return "page-thyme";
}

my Thymeleaf page look like. It displays all the in one go. I really don't understand what to do here.

<div th:each="info, status : ${info}">
<p th:text="${info.name}">
<p th:text="${info.dob}">
<p th:text="${info.university}">
</div>

Edit: I have added a service class

@GetMapping("/get/All-user-info/{departmentId}")
public String getAllUserInfo(Model model, @PathVariable String departmentId){
  List<Info> info = userService.getUser(departmentId);
model.addAttribute("info",info);
return "page-thyme";
}

Answer 1

You can pass the index of the object in parameter of your contoller like this:

@GetMapping (path = "/modal")
public String modal(Model model, @RequestParam(name = "page", defaultValue = "0") int page) {
    List<Info> info = new ArrayList<>();
    
    info.add(new Info("NA","22/02/2020","Florida"));
    info.add(new Info("PA","22/01/2020","Florida"));
    info.add(new Info("CA","22/03/2020","Florida"));
    info.add(new Info("DA","22/04/2020","Florida"));
    model.addAttribute("info",info);
    model.addAttribute("index",page);
    return "modal";
}

and add a sort of pagination in your HTML page:

<div >
  <p th:text="${info[__${index}__].name}">
  <p th:text="${info[__${index}__].dob}">
  <p th:text="${info[__${index}__].university}">
  <div th:each="info, status : ${info}"><a th:text="${status.index}" th:href="@{modal(page=${status.index})}"></a></div>
</div>