JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
<script id="siteTpl" type="text/template">
    <div class = "site"> <span class = "siteOrd" > 1 </span>
				<label> Name   
                    <input type="text" value="{{game}}" />
				</label> <div class = "row"> 
                <label> Position 
                    <select name = ""
    value = "{{position}}" > 
        <option value="striker"> striker </option>
		<option value="midfielder">midfielder</option> 
        <option value = "defender">defender </option>
		<option value="goalie">goalie</option> </select>
		</label> 
    <label>URL<input type = "text"
        value = "{{name}}" /> </label>
					<label>Years
                        <input type="text" value="{{years}}" />
					</label> <button type = "button"
    class = "addRow">Add Enviornment </button>
				</div> <button type = "button"
    class = "addSite"> Save and Add another Site </button>
				<button type="button" class="save">Save</button > </div>
                    
                    <form action=""></form>

JavaScript

envs = [{
        "game": "soccer",
        "position": "midfielder",
        "name": "joe saad",
        "years": "8"
    }];
    var data = {};
    data.sites = envs;
    console.log(JSON.stringify(data));
    var template = $('#siteTpl').html();
    var html = Mustache.to_html(template, data);
    $('form').html(html);