Odtnhj

I found this answer already that helped, but does not answer this question: Append text to textarea with javascript

To borrow from that as an example:
Clicking all three of the list items below, would read "HelloWorldEarthlings"

<textarea id="alltext"></textarea>
<ol onclick="addText(event)">
<li>Hello</li>
<li>World</li>
<li>Earthlings</li>
</ol>
<script>
function addText(event) 
</script>

I'd like to add a list and then distinguish clicks from each list into their own paragraph,

For example, I'd like to click the first option on each list below:

<textarea id="alltext"></textarea>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>
<script>
function addText(event) 
</script>

To somehow print:

Hello

Humans!

edit: I'd like to put upwards of ten lists - not just two.

It seems I've taken a slightly different approach than others used here. I've elected to do everything at run-time, so you don't have to pre-calc anything. Just throw your data into the page and it should 'just work' tm.

I saw you wanted o have an arbitrary number of lists, so allowed for that. Also, presumably, you'd like an arbitrary number of options in each list. What is uncertain however, is what the expected long-term behaviour of such a control would be. I.e if I have two lists, can I only evr expect to see two words in the box, or will it just continue to append the most recently chosen one ad-infinitum?

So, when the page loads I quickly examine the page's contents, looking for and counting instances of <OL> elements. I then create an array with this many elements before setting an attribute of each list to tell the list what it's index is.

When an <li> is clicked, the word is retrieved, the index of the list in which it resides is retrieved and then the word is stuffed into the array we created earlier. We then ask for a re-draw, in which case all of the elements of the array are stuck together with a space(' ') in between each element, before it's blasted to the screen.

"use strict";
function byId(id)return document.getElementById(id)
function newEl(tag)return document.createElement(tag)
window.addEventListener('load', onWindowLoaded, false);

var wordArray;

function onWindowLoaded(evt)

	var orderedLists = document.querySelectorAll('ol');
	var listArray = [...orderedLists];
	wordArray = new Array(listArray.length);
	
	listArray.forEach( function(curList, index)
						
							curList.dataset.listIndex = index;
							curList.addEventListener('click', onListClicked, false);
						
					);


function onListClicked(evt)

	var text = evt.target.textContent;
	var arrayIndex = parseInt(this.dataset.listIndex);
	wordArray[arrayIndex] = text;
	renderText();


function renderText()

	var str = wordArray.join(" ");
	byId('output').textContent = str;

	<textarea id='output'></textarea>
	<ol>
		<li>Hello</li>
		<li>Greetings</li>
		<li>Salutations</li>
	</ol>
	<ol>
		<li>Humans</li>
		<li>Peasants</li>
		<li>Earthlings</li>
	</ol>

If you want text paragraphs:

document.getElementById("alltext").value += "t" + (targ.textContent || targ.innerText) + "n";

<textarea id="alltext"></textarea>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>
<script>
function addText(event) event.srcElement;
 document.getElementById("alltext").value += "t" + (targ.textContent 
</script>

If you want HTML Paragraphs you can change the alltext textarea to a div, and use the following code:

document.getElementById("alltext").innerHTML += "<p>" + (targ.textContent || targ.innerText) + "</p>";

<div id="alltext"></div>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>
<script>
function addText(event) 
 var targ = event.target 
</script>

Here are a couple of possible solutions, you can pick which one you like best.

Append all to a single textarea with line breaks:

function addText(event) 
 var targ = event.target 

<textarea id="alltext"></textarea>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>

Append P tags to a Div:

var container = document.getElementById('alltext');

function addText(event) 

<p id="alltext"></p>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>