Php 向动态添加的元素添加相同的css

您好，我正在制作一个聊天应用程序，所以每当我点击一个在线用户时，就会打开一个聊天室，同样，每当我点击另一个用户时，就会打开多个聊天室。每次用户单击在线用户时，我都会为添加div。我在css方面遇到了一些问题。 这是因为我对每个新的聊天室使用相同的css。下面是我动态添加聊天室的代码

$(".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是一个显示单个在线用户的段落

这是我的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>

---

我在css方面遇到了一些问题。什么问题？$.user\u info.append；如果您多次执行该行代码，那么您创建的文档无效。id值必须是唯一的。您也缺少一些分号，我想这是发布问题时的输入错误。1.在$.header.append中。第二，在shout_msg.click函数ends处也可以发布相关标记吗？