JSFiddle - React, Tailwind, and code Playground

by Ivan Mishchenko

HTML

<script src="http://premium-api.com/jscourse/mustache.min.js"></script>
<script id="itemTmpl" type="x-tmpl-mustache">
    <div class="personItem">
        <h3><input type="checkbox"/> {{firstName}} {{lastName}}</h3>
        <p>Age: <i>{{age}}</i>, Current project: {{project.name}} ({{project.role}})</p>
        <p>
            Skills:
            {{#skills}}
            <b>{{.}}</b>
            {{/skills}}
        </p>
    </div>
</script>

<h1>Candidates</h1>
<div id="candidatesContainer"></div>

CSS

div.selectedPerson {
    background-color: yellow;
}

JavaScript

$(function() {
    var candidates = [
        {firstName: "John", lastName: "Doe", birthday: "1986-10-01", project: {name: "Ebq", role: "Developer"}, skills: ["Java", "JavaScript", "Linux"]},
        {firstName: "Paul", lastName: "Byrd", birthday: "1982-11-14", project: {name: "ETN", role: "JavaScript Developer"}, skills: ["HTML", "JavaScript", "CSS"]}
    ];
    var template = $("#itemTmpl").html();
    Mustache.parse(template); // optional
    candidates.forEach(function(item) {
        // calc age
        var ageDifMs = Date.now() - (new Date(item.birthday)).getTime();
        var ageDate = new Date(ageDifMs); // miliseconds from epoch
        item.age = Math.abs(ageDate.getUTCFullYear() - 1970);
        // work with template
        var rendered = Mustache.render(template, item);
        $('#candidatesContainer').append(rendered);
    });
    
});