First you should not be using value for an html element. You can use .value for extracting value from inputs. Change your line to:

var val = document.getElementById('output2').innerHTML;

Afterwards, you have to split the same way you did join.

var dates3 = val.split('<br>');


document.getElementById('output3').innerHTML = dates3;

You can directly use join, something like:

document.getElementById('output3').innerHTML = dates.join(',');

You can try mapping over the contents of dates instead, as so:

let datesElem = dates.map(date =>`<p>${date}</p>`);
// test: console.log(datesElem)

document.getElementById('output3').innerHTML = datesElem

I have an array that comes in from from my API that I would like to arrange in a way that is better for the user (namely, in a column as opposed to the typical comma separated printed array).

This is my JS Fiddle to give a clearer picture: https://jsfiddle.net/2z89owas/

My question is, how can I get output3 to display just like output (and maintain its status as an iterable array like it was as dates)?