JSFiddle - React, Tailwind, and code Playground

by Devendra Mani

HTML

<div id="container">
    <p>There are 0 boxes</p>
    <a href="#" class="more">Add more +</a>
</div>

CSS

body { font-family:Helvetica, Arial, sans-serif; font-size:12px; line-height:1.5; }

.more { color: green; }

.box {
    display:block;
    width:20px;
    height:20px;
    background:red;
    margin:10px;
    cursor:pointer;
    text-align:center;
}

.box a {
   display:block;
   width:20px;
   height:20px;
   color:#fff;
   text-decoration:none;
}

JavaScript

$(".more").click(function() {
    $("#container").append("<div class='box'><a href='#'>x</a></div>");
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
    if(count>2){
        $(".more").hide();
    }
   
});

$(document).on("click",".box a", function() {
    console.log("removeing");
    $(this).parent().remove();
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
     if(count<3)
    {$(".more").show();}
});