how to load to html table from HashMap correctly?

I am creating a vacation register app. I have a HashMap of ids(key) and list of dates belonging to each id(values). My output from the table needs to be :

Id | name | email | Date

How do i referr each date to correct Id??

my code :

    ArrayList<String> names = new ArrayList<>();           
    ArrayList<String> emails = new ArrayList<>();
    HashMap<Integer, ArrayList<String>> idAndDateMap = new HashMap<>();
    
      StringBuilder sB = new StringBuilder();
        sB.append(
                "<!DOCTYPE html>\n" +
                        "<html lang=\"en\">\n" +
                        "<head>\n" +
                        "    <meta charset=\"UTF-8\">\n" +
                        "    <title>Registered vacations</title>\n" +
                        "</head>\n" +
                        "<body>\n" +
                        "<H2>Registered Vacations</H2>\n" +
                        "<table border=\"5\" cellpadding=\"10 \" cellspacing=\"0 \">\n" +
                        "<tr>\n" +
        //header id                "<th> " + resMetaPersoner.getColumnName(1) + " </th>\n" +   
        //header name                 "<th>" + resMetaPersoner.getColumnName(2) + "</th>\n" +     
        //header email                "<th>" + resMetaPersoner.getColumnName(3) + "</th>\n" +     
       //header date       "<th colspan = \"25\">" + resMetaDato.getColumnName(2) + "</th>\n" +
                        "</tr>\n");

        sB.append("<tr>");

        idAndDateMap.entrySet().forEach(entry -> {
           sB.append("<td>" + entry.getKey() + "</td>");    //the ids
        }
          for (int i = 0; i < names.size(); i++) {
            sB.append(
                    "<td>" + names.get(i) + "</td>" +      //names
                    "<td>" + emails.get(i) + "</td>");     //emails
          }
         
         idAndDateMap.entrySet().forEach(entry -> {
           sB.append("<td>" + entry.getValue() + "</td>");    //the the dates
        }

                 sB.append("</tr>\n");
        }
        sB.append("</table>\n"
                + "</body>\n"
                + "</html>");

        File htmlTemplateFile = new File(
                "C:\\Users\\Rosso\\Desktop\\sysco\\newVaca\\src\\main\\frontend\\index.html");
        FileUtils.writeStringToFile(htmlTemplateFile, sB.toString());
        FileUtils.readFileToString(htmlTemplateFile);

Solution

solved by creating a seperate class 'Person':

import java.util.ArrayList;

public class Person {

private int id;
private String name;
private String email;
private ArrayList<String> dates;

public Person(int id, String name, String email, ArrayList<String> dates){
    setId(id);
    setName(name);
    setEmail(email);
    setDates(dates);
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public String getEmail() {
    return email;
}

public void setEmail(String email) {
    this.email = email;
}

public void setDates(ArrayList<String> dates) {
    this.dates = dates;
}

public int getId() {
    return id;
}

public void setId(int id) {
    this.id = id;
}

public ArrayList<String> getDates() {
    return dates;
}

In main class:

        while (resultSetPersons.next()) {
            int id = resultSetPersons.getInt(1);
            String name = resultSetPersons.getString(2);
            String email = resultSetPersons.getString(3);
            setPerson(id, name, email);
        }


 while (resultSetDates.next()) {
            int foreignKey = resultSetDates.getInt(1);
            String foreignKeyString = String.valueOf(foreignKey);
            String date = resultSetDates.getString(2);
            addDates(foreignKey, date);
        }

output to html Table:

        for (int i = 0; i < personList.size(); i++) {
            Person p = personList.get(i);
            sB.append("<tr>" +
                    "<td>" + p.getId() + "</td>" +
                    "<td>" + p.getName() + "</td>" +
                    "<td>" + p.getEmail() + "</td>" +
                    "<td>" + p.getDates() + "</td>" +
                    "</tr>\n");
        }
        sB.append("</table>\n"
                + "</body>\n"
                + "</html>");