JSFiddle - React, Tailwind, and code Playground

by Anchal Nigam

HTML

<div class="one" onclick="startIt1(this)">click me 1</div>

<div class="one" onclick="startIt2(this)">click me 2</div>

CSS

div
{
    padding: 20px;
    margin: 20px;
}

.one
{
    background-color: lime;
}

.two
{
    background-color: yellow;
}

.three
{
    background-color: cyan;
}
}

JavaScript

function startIt1(div)
{
    var newDiv = document.createElement("div");
    newDiv.className = "two";
    newDiv.innerText = "click me 1a";
    newDiv.onclick = step1;
    document.body.appendChild(newDiv);
}

function step1()
{
    this.innerText = "click me 1b";
    this.className = "three";
    this.onclick = step2;
}

function step2()
{
    this.onclick = null;
    this.parentNode.removeChild(this);
}

function startIt2(div)
{
    var newDiv = document.createElement("div");
    newDiv.className = "two";
    newDiv.innerText = "click me 2a";
    newDiv.onclick = function()
    {
        newDiv.innerText = "click me 2b";
        newDiv.className = "three";
        newDiv.onclick = function()
        {
            newDiv.onclick = null;
            newDiv.parentNode.removeChild(newDiv);
        }
    };
    document.body.appendChild(newDiv);
}