How to store all siblings in a dynamic local storage array?

I have 2 files - first.html & second.html

• first.html - here the user will input a few fields: Name, Organization, JobTitle,...
• second.html - this will output only the fields that were typed by the user using a textarea field

Purposer: My purpose is to (1) dynamically store all siblings of a particular span (id="spanBox") in an array and (2) to output all the element of that array using text area field in the second.html

Clarifications: Let me just clarify what do I mean by "dynamically store all siblings" in an array. In the next few lines, I will mention only a small part of the fields that will be stored in the array. Dynamically means, that I wouldn't have to store manually each one of the fields by its name, but instead, when an onClick event is triggered (after pressing the button) I'de call sendtoLastPage() that will store all the siblings dynamically in the array.

First.html:

function sendtoLastPage(){
     //How do I dynamically store all the siblings of id=spanBox to an array?
     window.location="second.html"; //Send users to the next page
}

<span class="box" id="spanBox">
  Name<BR><input name="Name" id="Name" type="text" size=40>
  Organization<BR><input name="Organization" id="Organization" type="text" size=40>
  Job Title<BR><input name="JobTitle" id="JobTitle" type="text" size=40>
  <button value="btn" onClick="sendtoLastPage();">Go to Next Page</button>
</span>

Note: I'm looking for a JavaScript solutions (not jQuery).

Thanks for dedicating the time to read this issue. I really tried to search for a solution in others threads, but I couldn't find any similar questions.