JSFiddle - React, Tailwind, and code Playground

by antixrist

HTML

<script src="https://raw.githubusercontent.com/jashkenas/underscore/master/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/template" id="tplPeoples">
    <%
        var depth = (depth || 0) + 1;
        if (depth > 1) { %>
            <p><b>Дети:</b></p>
        <% }
    %>
    <div class="peoples"  data-depth="<%= depth %>">
    <% peoples.forEach(function (man, index) { %>
        
        <div class="man" data-index="<%= index %>">
            <% if (index) { %> <hr /> <% } %>
            <p>
                <%= index + 1 %>. <br>
                <span class="label">Пол:</span>
                <label> М
                    <input type="radio" name="sex" value="1"
                        <% if (man.sex == 1) { print('checked'); } %>
                    />
                </label>
                <label> Ж
                    <input type="radio" name="sex" value="2"
                        <% if (man.sex == 2) { print('checked'); } %>
                    />
                </label> 
                <br>
                <span class="label">Имя:</span>
                <input type="text" name="name" value="<%= man.name %>" />
            </p>
            <p>
                <b>Параметры:</b>
                <br />
                <span class="label">Рост:</span>
                <input type="number" name="dimentions[height]" value="<%= man.dimentions.height %>" />
                <br />
                <span class="label">Вес:</span>
                <input type="number" name="dimentions[weight]" value="<%= man.dimentions.weight %>" /><br />
                <span class="label">Размер ноги:</span>
                <input type="number" name="dimentions[footSize]" value="<%= man.dimentions.footSize %>" />
                <% if (man.sex == 2) { %> 
                  <br />
                  <span class="label">Размер груди:</span>
                  <input type="number"...

CSS

.label {
    display: inline-block;
    width: 100px;
}
.peoples .peoples {
    margin-left: 30px;
}

JavaScript

// исходные данные
var peoples = [{
    sex: 1,
    dimentions: {
        height: 180,
        weight: 80,
        footSize: 43,
    },
    name: 'Alex',
    childs: [{
        sex: 2,
        dimentions: {
            height: 160,
            weight: 50,
            footSize: 38,
            boobsSize: 2,
        },
        name: 'Alexandra',
    }]
}, {
    sex: 2,
    dimentions: {
        height: 160,
        weight: 50,
        footSize: 38,
        boobsSize: 1,
    },
    name: 'Anna',
}];

// получаем функцию-шаблонизатор
var tplPeoplesFn = _.template($('#tplPeoples').html());
// рендерим шаблон
var result = tplPeoplesFn({peoples: peoples, tplPeoplesFn: tplPeoplesFn});
// отображаем результат
$('#result').html(result);