You should only need one function.
First set up your buttons to each have a value:
<button type="button" class="add-panel" data-value="4 Panel Smooth">Add 4 Panel Smooth</button><br><br>
<button type="button" class="add-panel" data-value="4 Panel Grained">Add 4 Panel Grained</button><br><br>
<button type="button" class="add-panel" data-value="4 Panel Grained 2 Glazed">Add 4 Panel Grained Glazed</button><br><br>
Create the list that will contain the values:
<ul id="demo"></ul>
Set up an event listener for the buttons:
var buttons = document.getElementsByClassName("add-panel");
for(var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", addPanel, false);
}
Create the event handler that updates the array and displays its contents in the HTML:
var panels = [];
function addPanel(e) {
// Get a reference to the button that was clicked
var button = e.currentTarget;
// Add the button's value to the array
panels.push(button.getAttribute("data-value"));
// Display the contents of the array on the page by generating <li> elements.
var demo = document.getElementById("demo");
demo.innerHTML = "";
var li;
for(var i = 0; i < panels.length; i++) {
li = document.createElement("li");
li.innerHTML = panels[i];
demo.appendChild(li);
}
}