JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
    <script id="theTemplate" type="text/x-jquery-tmpl">
            <p>the Stuff is {{= myValue}}</p>
            <input type="text" value="{{= myValue}}" id="id_{{= myValue}}" style="width:50px;" />
    </script>

    <form name="form1" method="post" action="dynamicFormTest.aspx" id="form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZM95GJne34ijKMUxQm0zFbZjpi1G" />

    <div>
        <div id="input1" style="margin-bottom:4px;" class="clonedInput">
            Name: <input type="text" name="name1" id="name1" />
        </div>
        <div id="templateSpot">        
        </div>
        <div>
            <input type="button" id="btnAdd" value="add another name" />
        </div>
        <input type="submit" name="Submit" value="Submit " />
    </div>
    </form>

JavaScript

$(document).ready(function () {
             $('#btnAdd').click(function () {
                 var items = [{ "myValue": "one" }, { "myValue": "two"}];
                 var num = $('.clonedInput').length;
                 var newNum = new Number(num + 1);
 
                 var itemTemplate = $("#theTemplate").template();
                 var renderedTemplate = $.tmpl(itemTemplate, items);
                 renderedTemplate.appendTo("#templateSpot");
 
                 var newElem = $('#name' + num).clone().attr('id', 'input' + newNum);
                 newElem.attr('name', 'name' + newNum);
 
                 newElem.appendTo("#input1");
             });
         });