JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
<button id="btn_1">btn</button>
<script>
    var num = 0;

    function adding() {
        var elm_add = document.createElement('button');
        elm_add.id = "hoge" + num;
        elm_add.textContent = 'btn added';
        var objBody = document.getElementsByTagName("body").item(0);
        objBody.appendChild(elm_add);
        elm_add.addEventListener("click", warnings, false);
        num++;
    }

    var elm = document.getElementById("btn_1");
    elm.addEventListener("click", adding, false);

    function warnings() {
        alert('it works! congraturations!!')
    }
</script>
</body>
</html>

CSS

strong { display: block; padding: 3px; }
input { width: 50%; min-width: 200px; }