Change the onClick function to target the edit buttons
<p>I have the following script </p>

<pre><code>var counter = 0;
function appendText(){

        var text = document.getElementById('usertext').value;

            if ( document.getElementById('usertext').value ){

                var div = document.createElement('div');
                div.className = 'divex';

                var li = document.createElement('li');
                li.setAttribute('id', 'list');  
                div.appendChild(li);

                var texty = document.createTextNode(text);
                var bigdiv = document.getElementById('addedText');

                var editbutton = document.createElement('BUTTON');
                editbutton.setAttribute('id', 'button_click');
                var buttontext = document.createTextNode('Edit');
                editbutton.appendChild(buttontext); 

                bigdiv.appendChild(li).appendChild(texty);
                bigdiv.appendChild(li).appendChild(editbutton);

                document.getElementById('button_click').setAttribute('onClick', makeAreaEditable());

                document.getElementById('usertext').value = "";
                counter++;
        }        
};                                                          

var makeAreaEditable = function(){    

    alert('Hello world!');
};
</code></pre>

<p>I want the makeAreaeditable function to work when the Edit button is pressed(for each of the edit buttons that are appended under the textarea).. In this state, the script, alerts me when i hit the Addtext button.</p>

<p>the following is the html. P.S. i need this in pure javascript, if you can help. thanks</p>

<pre><code>    &lt;textarea id="usertext"&gt;&lt;/textarea&gt;
    &lt;button onClick="appendText()"&gt;Add text &lt;/button&gt;


    &lt;div id="addedText" style="float:left"&gt;
    &lt;/div&gt;
</code></pre>
