JSFiddle - React, Tailwind, and code Playground

by Kriti

HTML

<input type="text" id="numOfForms"></input>
<input type="button" id="createForms" value="Get Fields"></input>

<div id = "targetDiv"></div>


<script id="hidden-template" type="text/x-custom-template">
    <div id="user-template" class="hidden">
        <p>First Name: <input type="text" name="firstName"> </input> </p>
        <p>Last Name: <input type="text" name="lastName"> </input></p>
        <br>
    </div>
</script>

JavaScript

$(document).ready(function(){
    $( "#createForms" ).click(function() {
      var numOfForms = $("#numOfForms").val();
      var template = $('#hidden-template').html();
      for(var i = 0; i < numOfForms; i++) {
          $('#targetDiv').append("<p>User" + (i+1) + ":</p>");  
        $('#targetDiv').append(template);
    }
});
});