JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<div>
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
  <button class="buttons">Button 3</button>
</div>
<p>
  <button id="addButton">Add button</button>
</p>
<textarea></textarea>

CSS

div,
p {
  margin: 5px;
}

textarea {
  width: 100%;
  height: 50px;
  margin: 0;
}

.buttons {
  margin: 1px 2px;
}

JavaScript

$("div").on("click", ".buttons", function(e) {
  e.preventDefault();
  $("textarea").append($.trim($(e.target).text()) + ", ");
});

$("#addButton").on("click", function(e) {
  e.preventDefault();
  var num = $("div .buttons").length + 1;
  var $button = $("div .buttons:first").clone().html("Button " + num).appendTo("div");
});