Edit in JSFiddle

!function () {
    "use strict";
    var container = document.getElementById('bah'),
        more = document.querySelector("button.more"),
        less = document.querySelector("button.less"),
        messages = ["Boo", "Bah", "Bloo"];
    
    more.addEventListener("click", function (e) {
        var p = document.createElement("p"),
            count = container.querySelectorAll("p").length;
        if (count >= 18)
            return;
        p.innerHTML = messages[count % 3];
        container.appendChild(p);
    });
    
    less.addEventListener("click", function (e) {
        if (container.querySelectorAll("p").length)
            container.removeChild(container.children[0]);
    });
}();
<div id="bah">
    <p>Boo</p>
    <p>Bah</p>
</div>
<button class="more">Add</button><button class="less">Remove</button>
/* 1 P */
p {
    background: lightblue;
    box-sizing: border-box;
    height: 300px;
    width: 300px;
    display: inline-block;
    margin: 0;
    transition: all .3s linear;
    margin: 0;
    border-radius: 150px;
    text-align: center;
    padding-top: 140px;
}

/* 3+ P */
p:nth-last-of-type(n+3), p:nth-last-of-type(n+3) ~ p {
    background: lightpink;
    height: 150px;
    width: 150px;
    padding-top: 65px;
}

/* 9+ P */
p:nth-last-of-type(n+9), p:nth-last-of-type(n+9) ~ p {
    background: red;
    height: 100px;
    width: 100px;
    padding-top: 40px;
}

#bah {
    height: 300px;
    border-radius: 5px;
    border: 3px orange solid;
    overflow: hidden;
    text-align: center;
}