Dynamically adding/removing sections within dynamically added sections
<p>The script is supposed to have buttons to add or delete a section. Within that section there are buttons to add or delete a sub-section called 'row'. The problem I'm having is linking the row buttons to the section they were created in. Ie, no matter which section they belong to, they add or delete in the last section created. So I tried adding the <code>sec</code> argument to <code>mod_row()</code> but it seems it's always whatever the current value of <code>s</code> is, not the value of <code>s</code> when the button was created.</p>

<pre><code>foo = document.createElement('p');
    var bar = document.createElement('button');
    bar.setAttribute('type','button');
    bar.onclick = function () { mod_row('add',s) };
    bar.appendChild(document.createTextNode('add row'));
foo.appendChild(bar);
    bar = document.createElement('button');
    bar.setAttribute('type','button');
    bar.onclick = function () { mod_row('del',s) };
    bar.appendChild(document.createTextNode('del row'));
foo.appendChild(bar);
section.appendChild(foo);

foo = document.createElement('div');
foo.setAttribute('id','magic_rows_'+s);
section.appendChild(foo);

function mod_row (mod,sec) {
    var row = "blah blah blah";
    var magic_rows = document.getElementById('magic_rows_'+sec);
    if (mod == 'add') {
        var new_p = document.createElement('p');
        new_p.setAttribute('id','row'+r);
        new_p.innerHTML = row;
        magic_rows.appendChild(new_p);
        r++;
    }
    else if (mod == 'del') {
        magic_rows.removeChild(magic_rows.lastChild);
        r--;
    }
}
</code></pre>
