JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<a href="#" id="more" >More</a>
<a href="#" id="less">Less</a>
</div>

JavaScript

window.addEventListener('load',function l()
{
    var more = document.getElementById('more'),
        less = document.getElementById('less'),
        div = more.parentNode,
        added = [],//keep references to added elements, use as stack
        rmHandle = function(e)
        {
            var rm = added.pop();
            console.log(rm);
            rm.parentNode.removeChild(rm);
            if (added.length === 0)
            {
                less.removeEventListener('click', rmHandle, false);
            }
            e.preventDefault();
            e.stopPropagation();
        };
    more.addEventListener('click',function(e)
    {
        var newP, count = added.length;
        e.preventDefault();
        e.stopPropagation();
        if (count === 0)
        {
            less.addEventListener('click', rmHandle, false);
        }
        ++count;
        newP = document.createElement('p');
        newP.setAttribute('id','param'+count);
        newP.appendChild(document.createTextNode('New Paragraph #'+count));
        added.push(newP);
        div.insertBefore(newP, less);//append at end...
    },false);
    window.removeEventListener('load',l,false);
}, false);