vizz 0 Junior Poster

I have created chatbox using jquery. It generates one chatbox per user. But it goes till users available.

I want to show only 4 box on page.

If 4 chatbox are visible and clicked on 5th user hide first chatbox from right side and add chatbox for that clicked user to left side.

At end there must be only 4 chatbox available on page at same time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Chatting</title>
<style type="text/css" media="all">
.chatboxlink{width:25%; padding:auto;height:350px; }
.chatboxlink a{ display:block; padding:0px 5px 0px 5px; width:15%;height:10px;}

.chatbox{ width:250px; height:250px; background:#CCFFFF; float:right; bottom:-190px; position:relative; right:0px; border:1px solid #993300;}
.chatbox textarea{  height:80px; width:240px;overflow-y:auto scroll; resize:none; }
.chatbox p{ text-align:center; font-size:16px; color:#99FF99;}
.chatinput{ border-top:2px solid #00FF99; height:60px;width:250px; bottom:40px; position:absolute; float:left; margin-left:0; }
#title{ padding:5px; text-align:left; border:1px solid #3366FF; height:25px; }
#chatmessage{ background:#99CC99;height:155px;width:250px; top:0px; position:relative; overflow:auto scroll;}

<script type='text/javascript' src=''></script>
<script type='text/javascript'>

    $('.chatboxlink a').click(function(){

        var $user= $(this).attr('href');        
        var $id =  $(this).attr('id');

        var ids = $('[id="''"]');

        if(ids.length>1 && ids[0]==this)


            $('body').append('<div class="chatbox" id='+ $id +'><div id="title"> ' + $user + ' </div><div id="chatmessage"></div><div class="chatinput"><textarea></textarea></div></div>');


        return false;           



    <div class="chatboxlink"><br />
        <a href="Charles" id="1">Charles</a><br />

        <a href="Randy" id="2">Randy</a><br />

        <a href="Ben" id="3">Ben</a><br />

        <a href="William" id="4">William</a><br />

        <a href="George" id="5">George</a><br />

        <a href="Karl" id="6">Karl</a><br />

        <a href="Denis" id="7">Denis</a><br />

        <a href="John" id="8">John</a><br />

        <a href="Victor" id="9">Victor</a><br />

        <a href="Andrew" id="10">Andrew</a><br />

Demo available