Adding same css to dynamically added elements - php

Question

Hello I am making a chat application, so whenever i click on a online user a chatbox should open, similarly whenever multiple chatbox should open when i click a different users. I am appending div for a each time a user click on a online user. I am facing some issues with css.
Is this because i am using same css for each new chatbox. Here is my code for adding a chatbox dynamically.
$(".shout_msg").click(function(){
var id = $(this).attr('id');
var name = $(this).text();
alert("name is "+ name + "id is " +id);
$('body').append("<div class = 'shout_box'></div>");
$(".shout_box").append("<div class = 'header'>'"+name+"'</div>");
$(".header").append("<div class='close_btn'> </div>")
$(".shout_box").append("<div class = 'toggle_chat'></div>");
$(".toggle_chat").append("<div class = 'message_box'></div>");
$(".toggle_chat").append("<div class = 'user_info'></div>");
$(".user_info").append('<input name = "shout_message" id = "shout_message" type = "text" placeholder = "Type Message Hit Enter" />');
})
shout_msg is a paragraph which show a single online user.
This is my css
<style type="text/css">
.shout_box {
background:#627BAE; width:260px; overflow:hidden;
position:fixed; bottom:0; right:20%; z-index:9;
}
.shout_box .header .close_btn {
background: url(close_icon.png) no-repeat 0px 0px;
float:right; width:15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -16px;
}
.shout_box .header .open_btn {
background: url(images/close_btn.png) no-repeat 0px -32px;
float:right; width:15px;
height:15px;
}
.shout_box .header .open_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold; color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none; cursor:pointer;
}
.shout_box .header:hover{
background-color: #627BAE;
}
.shout_box .message_box {
background: #FFFFFF; height: 200px;
overflow:auto; border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px; display: block;
border-bottom: 1px solid #F3F3F3; padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
.time{
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal; float:right; color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;margin-top: 10px;
}
.user_info input {
width: 98%; height: 25px; border: 1px solid #CCC; border-top: none; padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold; display: block;
}
.userdisplay{
width: auto;
height: 30px;
border-radius: 10px;
background-color: #627BAE;
}
.userdisplay p{
width: auto;
//background-color: yellow;
padding : 10px;
}
.userdisplay a{
float : right;
}
</style>