JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    var counter = 0;
    var limit = 50;

    function addInput(divName){
         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              var newdiv = document.createElement('div');
              newdiv.innerHTML = "Element " + (counter + 1) + " <input type='text' name='myInputs[]'>";
              document.getElementById(divName).appendChild(newdiv);
              counter++;
         }
    }
</script>
</head>

<body onload="test()">
<form method="POST"  align="center">
     <div id="dynamicInput">
        Title<br><input type="text" value="" name="myInputs[]" id="someid" disabled>
     </div>
     <input type="button" value="Add another event" onClick="addInput('dynamicInput');">
     <br>
     <input type="submit" value="Submit">

</form>
        <script>
				function test(){
                var emotion = "";
        var raw = Math.random();
        var final = Math.ceil(raw * 4);
        if (final == 1)
            document.getElementById("someid").value = "A";
        else if (final == 2)
            document.getElementById("someid").value = "B";
        else if (final == 3)
            document.getElementById("someid").value = "C";
        else if (final == 4)
            document.getElementById("someid").value = "D";
        }

        </script>

</body>