<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="chart-container">
<div class="chat-nav">
<div id="chat">
<span><b>Chat</b></span>
</div>
<div id="icon">
<i class="fa-regular fa-square-plus"></i>
<i class="fa-solid fa-ellipsis-vertical menu-icon"></i>
</div>
</div>
<div class="search-bar">
<i class="fa-solid fa-magnifying-glass menu-icon"></i>
<input type="text" class="search" placeholder="Search">
<label for="search"></label>
</div>
<div class="btn-container">
<button>ALL</button>
<button>Unread</button>
<button>Group</button>
</div>
<div class="chat-box">
<div class="profile-image">
<i class="fa-regular fa-circle-user profile-icon"></i>
</div>
<div class="content-box" id="increase">
<div id="Heading">Omkar Waghmare</div>
<div id="display-content">Ok</div>
<hr>
</div>
</div>
<button id="add-btn">member</button>
</div>
<script>
let addBtn = [Link]("#add-btn"); // Corrected selector for
the button
[Link]("click", function () {
// Create a new chat-box div element
let newChatBox = [Link]("div");
[Link]("chat-box");
// Create profile image div
let profileImageDiv = [Link]("div");
[Link]("profile-image");
let profileIcon = [Link]("i");
[Link]("fa-regular", "fa-circle-user", "profile-
icon");
[Link](profileIcon);
// Create content box div
let contentBoxDiv = [Link]("div");
[Link]("content-box");
let headingDiv = [Link]("div");
[Link] = "Heading";
[Link] = "New Member"; // You can change this to
dynamic content
let displayContentDiv = [Link]("div");
[Link] = "display-content";
[Link] = "Hi there!";
[Link](headingDiv);
[Link](displayContentDiv);
// Add an HR line
let hrElement = [Link]("hr");
[Link](hrElement);
// Append the profile image and content box to the new chat box
[Link](profileImageDiv);
[Link](contentBoxDiv);
// Append the new chat box to the chart-container
let container = [Link](".chart-container");
[Link](newChatBox);
});
</script>
</body>
</html>