Search embedded data array to update textArea on a form after reload

Question

I'm pretty new to js. I have a txt file on my HD that I want to read into my js project, but after looking at reams of the same question by others e.g. How to read text file from filesystem in JavaScript I have to accept the fact that "you can't do that", at least not easily with code I can understand and maintain and that works in all browsers, so I'm taking the easy way out and will embed the data from my text file into the html and read it from there. This is on a form which will generally not have internet access.

So I now have an array of names in a div <div id="myNames" class="myNames" display="none"> with 5 data items for each name. Each line of the array will look something like: ["name", "item1", "item2", "item3", "item4", "item5"] and I have full control of the formatting. There are no other punctuation chars in the array except for commas.

I want to search the div for a given name, and write all the data items for that name to a textArea on the form so it looks like:

name item1 item2 item3 item4 item5 These are supposed to be in a vertical format but the question editor doesn't seem to allow that.

I'd like to update the textArea (id="leaderInfo") every time the form (id="myForm") is reloaded, getting the name to search for from a form input field (id="podLeader"). This name will change with every reload, which is triggered with a click on a button (id="loadDataBtn"). The reload itself works well and is not part of the question.

The resultant output in the textArea is for visual reference only, and no further operations are required for the data items.

I'd really appreciate some help.

@Joy Dey, this is as far as I've got.

Here's where leaderName gets updated when the form is reloaded with the loadData button, and this name then gets searched for in the array of myNames.

<label for="leaderName">POD Leader's Name </label>;     
<input name="PODLeadersName" id="leaderName" size="15"  class="ip2" value='TBD'/>

Here's myForm reload button (which works) and which should now also initiate the update of the leaderInfo textArea.

<button id="loadData"  type="button"  class="button2" onclick= "$('txtfiletoread').click()">Load Pod Data</button>
<input type="file" id="txtfiletoread" accept=".txt"  style="display: none"/>

This is where the 60 lines from the txt file get pasted into the HTML. Each line holds an array of 6 comma-delimited substrings, with the first substring being a leaderName

<div id="myNames" class="myNames" display="none">

Where I'm having trouble is in extracting the leaderData out of the 60 line array of strings in myNames. I can find the index of the first match for leaderName, but I can't seem to get the other 5 substrings into the leaderInfo textArea.