I need the element that holds the messages of my chat app to show the latest messages when you open a new chat, I have tried different things with javascript but nothing seems to work
<div class="conversation" id="conversation-2">
<div class="conversation-top">
<button type="button" class="conversation-back"><i class="ri-arrow-left-line"></i></button>
<div class="conversation-user">
<img class="conversation-user-image"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGVvcGxlfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="">
<div>
<div class="conversation-user-name">Someone 1</div>
<div class="conversation-user-status online">online</div>
</div>
</div>
</div>
<div class="conversation-main">
<ul class="conversation-wrapper">
<li class="conversation-item me">
<div class="conversation-item-side">
<img class="conversation-item-image"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGVvcGxlfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="">
</div>
<div class="conversation-item-content">
<div class="conversation-item-wrapper">
<div class="conversation-item-box">
<div class="conversation-item-text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet natus
repudiandae quisquam sequi nobis suscipit consequatur rerum alias
odio repellat!</p>
<div class="conversation-item-time">12:30</div>
</div>
</div>
</div>
<div class="conversation-item-wrapper">
<div class="conversation-item-box">
<div class="conversation-item-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque,
tenetur!</p>
<div class="conversation-item-time">12:30</div>
</div>
</div>
</div>
</div>
</li>
<li class="conversation-item">
<div class="conversation-item-side">
<img class="conversation-item-image"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGVvcGxlfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="">
</div>
<div class="conversation-item-content">
<div class="conversation-item-wrapper">
<div class="conversation-item-box">
<div class="conversation-item-text">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="conversation-item-time">12:30</div>
</div>
</div>
</div>
<div class="conversation-item-wrapper">
<div class="conversation-item-box">
<div class="conversation-item-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eos
ab in?</p>
<div class="conversation-item-time">12:30</div>
</div>
</div>
</div>
<div class="conversation-item-wrapper">
<div class="conversation-item-box">
<div class="conversation-item-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint,
debitis. Iste natus est aliquam ipsum doloremque fugiat, quidem eos
autem? Dolor quisquam laboriosam enim cum laborum suscipit
perferendis adipisci praesentium.</p>
<div class="conversation-item-time">12:30</div>
</div>
</div>
</div>
</div>
</li>
<li class="conversation-item me">
<div class="conversation-item-side">
<img class="conversation-item-image"
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGVvcGxlfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="">
</div>
<div class="conversation-item-content">
<div class="conversation-item-wrapper">
<div class="conversation-item-box">
<div class="conversation-item-text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas, eos,
magni temporibus, placeat consectetur nobis incidunt dicta a culpa
vel esse. Facilis fugiat possimus eveniet accusamus dignissimos
pariatur inventore animi rem vero, eligendi obcaecati fugit quaerat?
Officia ex quod eaque maxime ipsam, tempore error laboriosam
laborum, magnam ipsum doloremque quas.</p>
<div class="conversation-item-time">12:30</div>
</div>
</div>
</div>
<div class="conversation-item-wrapper">
<div class="conversation-item-box">
<div class="conversation-item-text">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus
debitis odio maiores perferendis ipsa repudiandae amet blanditiis
quod. Ullam, dolorum.</p>
<div class="conversation-item-time">12:30</div>
</div>
</div>
</div>
<div class="conversation-item-wrapper">
<div class="conversation-item-box">
<div class="conversation-item-text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium
blanditiis ea, voluptatum, eveniet at harum minima maxime enim aut
non, iure expedita excepturi tempore nostrum quasi natus voluptas
dolore ducimus!</p>
<div class="conversation-item-time">12:30</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="conversation-form">
<div class="conversation-form-group">
<textarea class="conversation-form-input" rows="1" placeholder="Type here..."></textarea>
</div>
<button type="button" class="conversation-form-button conversation-form-submit"><i
class="ri-send-plane-2-line"></i></button>
</div>
</div>
// start: chatlist
document.addEventListener('DOMContentLoaded', function() {
var chats = document.querySelectorAll('.content-messages-chat');
chats.forEach(function(chat) {
chat.addEventListener('click', function() {
chats.forEach(function(item) {
item.classList.remove('active');
});
this.classList.add('active');
});
});
});
// end: chatlist
// start: Conversation
document.querySelectorAll('.conversation-form-input').forEach(function(item) {
item.addEventListener('input', function() {
this.rows = this.value.split('n').length;
});
});
document.querySelectorAll('[data-conversation]').forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
document.querySelectorAll('.conversation').forEach(function(i) {
i.classList.remove('active');
});
document.querySelector(this.dataset.conversation).classList.add('active');
});
});
document.querySelectorAll('.conversation-back').forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
this.closest('.conversation').classList.remove('active');
document.querySelector('.conversation-default').classList.add('active');
});
});
// end: Conversation
Im expecting the conversation wrapper to always be scrolled down when you open it. There I added my html and javascript i didnt add the css since its not relevant. Its important to know that there are going to be multiple different chats, increasing the number on conversation-#number# by 1 per chat.