JSFiddle - React, Tailwind, and code Playground

by pjdicke

HTML

<div id="output">
    <div class="pop-circle" data-type="Cats"></div>
</div>
<button>Add Another</button>

CSS

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

JavaScript

var i = 0;

$("#output").on('mouseenter', '.pop-circle', function () {
    var type = $(this).data('type');
    $(this).attr('title', type);
    alert( $(this).attr('title') );
});

$('button').on('click', function () {
    i++;
    var newItem = $('<div class="pop-circle" data-type=" Title'+ i +'"></div>');
    $(newItem).appendTo('#output');
});