How do I display multiple values drawn from arrays in localstorage?

See more:

Javascript

LocalStorage

My code is designed to create multiple school announcements; one may be regarding the Basketball Team, the other Kingsmen Club team...

Whenever a new announcement's information is went through arrays of things like the announcements description, name, room number; it just replaces the old one and therefore only one announcement displays.

It does go through a couple of if statements to make sure the announcement's prefered grade and gender matches those of the user (aka the student) before displaying.

How do I display multiple values from these arrays I have, and also choose where each one goes on the webpage?

`function show() {
club_desc = JSON.parse(localStorage.getItem("desc"));
club_name = JSON.parse(localStorage.getItem("Name"));
club_room = JSON.parse(localStorage.getItem("RmNo"));
club_time = JSON.parse(localStorage.getItem("Time"));
club_AM = JSON.parse(localStorage.getItem("AM"));
student2_grade = localStorage.getItem("StudentGrade");
student2_gender = localStorage.getItem("StudentGender");
student2_club = localStorage.getItem("StudentClub");
detail2Gender = JSON.parse(localStorage.getItem("Gender"));
detail2Grade = JSON.parse(localStorage.getItem("Grade"));

var i;
for (var i = 0; i < club_desc.length; i++) {

if ((detail2Gender[i] == student2_gender) ||
(detail2Gender[i] == "Both"))
{

if ((club_name[i] == student2_club) ||
(club_name[i] == "Misc"))
{

if ((detail2Grade[i] == student2_grade) ||
(detail2Grade[i] === "All"))
{

holdAnnounce += club_desc[i] + "
";
holdAnnounce += club_name[i] + "
";

document.getElementById("desc").innerHTML = club_desc[i];
document.getElementById("Name").innerHTML = club_name[i];
document.getElementById("RmNo").innerHTML = club_room[i];
document.getElementById("Time").innerHTML = club_time[i];
document.getElementById("AM").innerHTML = club_AM[i];

}
}
}
}
}

window.onload = show;`

What I have tried:

These lines are what my teacher recommended, but they don't work.

'holdAnnounce += club_desc[i] + "
";
holdAnnounce += club_name[i] + "
";'

I copied these lines of code from similar issues online but they don't work either.

console.log(club_desc.join('\r\n'));
holdAnnounce += "

" + club_desc[i] + "

";
club_desc.push(document.getElementById("desc").value);