Creating checkbox when a checkbox is selected in javascript
<pre><code>    var container = document.getElementById('container'),
    template = '&lt;li&gt;\
        &lt;input type="checkbox"&gt;\
    &lt;/li&gt;\
    &lt;li&gt;\
        &lt;input type="checkbox"&gt;\
    &lt;/li&gt;\
    &lt;li&gt;\
        &lt;input type="checkbox"&gt;\
    &lt;/li&gt;';

container.onchange = function(e) {
    var event = e || window.event,
        target = event.srcElement || event.target;

    if( target.checked &amp;&amp; target.parentNode.getElementsByTagName('ul').length === 0 ) {
        var ul = document.createElement('ul');
        ul.innerHTML = template;
        target.parentNode.appendChild(ul);
    }
};
</code></pre>

<p>HTML: </p>

<pre><code>    &lt;ul id="container"&gt;
    &lt;li&gt;
        &lt;input type="checkbox"&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;input type="checkbox"&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;input type="checkbox"&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I have create three checkbox. When one checkbox is selected another threebox appears beneath it and so on. Now the problem is how to assign unique id and onclick event to every checkbox</p>
