JSFiddle - React, Tailwind, and code Playground

HTML

<span id="target"></span>

JavaScript

var Person = function(name, age, sex, weight) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.weight = weight;
};

Person.prototype.setTitle = function(title) {
    this.title = title;  
};

Person.prototype.getPersonInfo = function() {
    return "Name: " + this.name + "\nAge: " + this.age + "\nSex: " + this.sex + "\nWeight: " + this.weight + "\nTitle: " + this.title;  
};

var p1 = new Person("Brian", 27, "Male", 150),
    p2 = new Person("William", 25, "Male", 200),
    p3 = new Person("Jessica", 30, "Female", 110),
    p4 = new Person("Alex", 20, "Female", 125);

var people = [];
people.push(p1, p2, p3, p4);

p1.setTitle("Software Engineer");
p2.setTitle("Trader");
p3.setTitle("Designer");
p4.setTitle("Student");

var target = document.getElementById('target');

for (var i = 0; i < people.length; i++) {
    var template = document.createElement('div');
    template.innerHTML = people[i].getPersonInfo();
    target.parentNode.insertBefore(template, target.nextSibling);
}