JSFiddle - React, Tailwind, and code Playground

by Krishna Gopinath

HTML

<div class="pop-circle Cats"></div>
<br/>
<div class="pop-circle Dogs"></div>
<br/>
<div class="pop-circle Rats"></div>
<br/>
<div class="pop-circle Monkeys"></div>
<br/>
<button>Add more</button>
<input type="text" />

CSS

.pop-circle {
    width:18px;
    height:18px;
    border-radius:4px;
    background-color:#50377A;
}

JavaScript

/*
$(document).on("mouseover", ".pop-circle", function () {
    var title = $(this).attr("class").split(" ")[1];
    $(this).attr("title", title);
});
*/

/*
//THIS WONT WORK FOR DYNAMIC ELEMENTS!!
$(".pop-circle").on("mouseover", function () {
    var title = $(this).attr("class").split(" ")[1];
    $(this).attr("title", title);
});
*/



$("button").on("click", function () {
    var animal = $("input:text").val();
    $("input:text").val("");
    $(this).before("<div class= 'pop-circle " + animal + "' ></div>");
});