将相同的css添加到动态添加的元素中

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'>&nbsp;</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>