Leaderboard

You can use indexOf() https://www.w3schools.com/jsref/jsref_indexof_array.asp to check if value already exists in array, if returned value equals -1 it could not be found, so it will be safe to push button non duplicate value into array.

Each time you click a button you will have to loop through the panels array and compare its elements with the button's value. If the value was found then don't add it to the array. A for() loop and a boolean variable should be enough to do that.

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); } }