Chat with two users using JavaScript. How to make a message from one user was displayed below the message another user?

Hello! Trying to program a javascript chat with two users. Now there is this code:

class Person {
constructor(name, age, profession, height, pic, elNumber) {
this.name = name;
this.age = age;
this.profession = profession;
this.height = height;
this.hobby = {
main: 'painting',
second: 'photo'
}
this.pic = pic;
this.form = document.querySelector('.chat-center');
this.el = document.querySelectorAll('.chat-side')[elNumber];
}

createForm() {
let form = document.createElement('form');
form.innerHTML = `


`;

form.addEventListener('submit', (e) => {
this.form.innerHTML = form.elements[0].value;
e.preventDefault();
})

this.el.appendChild(form);

}

renderUser() {
let userCard = document.createElement('div');
userCard.classList.add('user-card');
userCard.innerHTML = `



${this.name}
Age: ${this.age}
Hobby: ${this.getHobbyString()}
Job: ${this.profession}


`;

this.el.appendChild(userCard);
this.createForm();
};
};

let julia = new Person('Julia', 28, 'programmer', 160, 'woman.jpg', 0);
julia.renderUser();

let dasha = new Person('Dasha', 25, 'designer', 170, 'devushka.jpg', 1);
dasha.renderUser();

Now when I enter the message from one user, it is displayed in the middle. When I enter from the second it overwrites the first. Is responsible for this code:

form.addEventListener('submit', (e) => {
this.form.innerHTML = form.elements[0].value;
e.preventDefault();
})

Actually a question: how to make a message from one user displayed, and underneath, a message from another user, not overwritten? Thank you in advance for your help.
April 3rd 20 at 18:43
0 answer

Find more questions by tags JavaScript