Collapsible button with DOM

I am trying to add functionality to the button, so when the button is clicked, it would list the paragraphs as shown in the expected output. when this button is repeatedly pressed, the list should be repeatedly rendered. for instance, if the “Know More” button is pressed thrice, then the list should be displayed three times one below the other.

Please let me know what I am missing and how I should correct the addListOfEvents function.

var textArray = 
["Mercury: It is the closest planet to the Sun, and second smallest planet in the solar system.",
"Venus: It is the second planet in the solar system.",
"Earth: Our planet earth is the third planet in the solar system.",
"Mars: It is the fourth planet from the Sun and is commonly referred to as the Red Planet.",
"Jupiter: It is the fifth planet from the Sun and is the largest planet in the solar system.",
"Saturn: It is the sixth planet from the Sun and is the second largest in the solar system.",
"Uranus: It is the seventh planet from the Sun and is the third largest in the solar system.",
"Neptune: It is the outermost planet of the solar system.",
];

function addListOfEvents() {
    textArray.forEach(function(value,index) {
        let addEventNames ='<ul>' + '<li>' +value.name+ '</li>' + '</ul>';
        document.getElementById('addEventNames').innerHTML = addEventNames;
        
    })
}

for the HTML:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Adding HTML with Javascript</title>
    <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
</head>
<body>
    <h1>Solar Sytsem</h1>
    <p>The Solar System[a] is the gravitationally bound system of the planets and the Sun plus other objects that orbit it, 
        either directly or indirectly.[b] Of the objects that orbit the Sun directly, the largest eight are the planets, with 
        the remainder being smaller objects, such as dwarf planets and small Solar System bodies. Of the objects that orbit the Sun 
        indirectly, the moons, two are larger than the smallest planet, Mercury.The Solar System formed 4.6 billion years ago from the 
        gravitational collapse of a giant interstellar molecular cloud. </p>
    <p>The solar system comprises of eight planets</p>
    <button id="addList" onclick="addListOfEvents()">Know More</button>
    <div id="addEventNames"></div>
    <script src="index.js"></script> 
</body>
</html>

Problem 1:
Inside .forEach you are using value.name. This is incorrect. value is each item in the array, so it does not have a property .name. You should just use value.

Problem 2:
The way you are adding elements to your DOM, they are overwriting each other. This mean you will only see the last one. Remember that the DOM has a tree structure. What you really want is to add each <li> to your unordered list. Read about .appendChild(), it will help!