JSFiddle - React, Tailwind, and code Playground

by rwaldron

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}}"  name="id_{{= myValue}}" id="id_{{= myValue}}" style="width:50px;" />
</script>

<form name="form1" method="post" id="form1">
  
  <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

$('#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, 
         'name': 'input' + newNum         
     });
     newElem.attr('name', 'name' + newNum);

     newElem.appendTo("#input1");
 });


$("#form1").bind("submit", function(e) {
    e.preventDefault();
    
    console.log( $("#form1").serialize() )    
    
    return false;
});