JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.10.0/javascript/semantic.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.10.0/css/semantic.min.css">

<div id="container">
    <div class="ui button red">press1</div>
    <div class="ui button red">press2</div>
</div>

<button id="addButtons">Add a few more!</button>

CSS

.ui.button { margin: 10px; }

JavaScript

var $container = $("#container");
var count = 2;

$container.on("click", '.button', function() {

    alert ("You've clicked on " + $(this).text() );
});

$("#addButtons").on("click", function() {

    $container.append('<div class="ui button red">press' + (++count) + ' </div>');
});