When i clickk on the button with the Id "add" it will append a div with the class "note" to a space i named "notespace", inside the note it will be a div element with the class "expand" which will function as a button.

My goal is to be able to change the style attributes of the parent "note" element by clicking on the "expand" div inside of it.

I tried to change the size of the note to 3000px, but i got an error message, this one:

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

Any ideas on how i can fix this?

<script>

var add = document.getElementById("add");

add.addEventListener("click", function(){
    var textValue = text.value;
    var p = document.createElement("p");
    p.innerHTML = "<div class='note'>" + textValue + "<br/><br/><div class='expand'> Expand </div></div>";
    notespace.appendChild(p);
    text.value = "";


        for( var i = 0; i < expand.length; i++){
            expand[i].addEventListener("click", function(){
                notes[i].style.size = "3000px";
            })
    
        }    

  

    
 

})

 </script>