JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ftree">
    <div class="person person1 sexm p3 p2">
        <span class="name">name 1</span>
        <span class="surname">surname 1</span>
    </div>
    <div class="person person2 sexm">
        <span class="name">name 2</span>
        <span class="surname">surname 2</span>
    </div>
    <div class="person person3 sexf">
        <span class="name">name 3</span>
        <span class="surname">surname 3</span>
    </div>
    Loading...</div>

JavaScript

/* person.1.name = 'name 1';
person.1.surname = 'surname 1';
person.1.father = 2;
person.1.mother = 3;
person.1.sex = 'm';

person.2.name = 'name 1';
person.2.surname = 'surname 1';
person.2.sex = 'm';

person.3.name = 'name 1';
person.3.surname = 'surname 1';
person.3.sex = 'f';

d = $('#ftree');
$('<div>'+
*/