css - incrementing position when clicked an item in jquery -

css - incrementing position when clicked an item in jquery -

i want create multiple div when click item list, , want create it's position incremented position before, div should have fixed positioning, here's illustration output want achieve:

here's css:

.message_chat { width:300px; height:300px; position:fixed; background:black; right:0px; bottom:5px; }

here's jquery:

right = 50; $('.chat_div').click(function(e) { e.preventdefault(); var id = $(this).attr('id'); var pop_up = '<div class = "message_chat" id = "'+id+'"></div>'; right+=50; $('#'+id).css('right',right+'px'); $('.chatboxholder').append(pop_up); });

here's code tried in jsfiddle: http://jsfiddle.net/iloveprogramming12/kf0b6bh8/2/

do mean like

class="snippet-code-js lang-js prettyprint-override">jquery(function($) { var right = 50; $('.chat_div').click(function(e) { e.preventdefault(); var $this = $(this); var $popup = $this.data('message-chat'); //if popup there friend don't create 1 time again if (!$popup) { var $popup = $('<div class = "message_chat" id = "chat-' + this.id + '"></div>').css('right', right + 'px').appendto('.chatboxholder'); $this.data('message-chat', $popup) right += 150; } }); }) class="snippet-code-css lang-css prettyprint-override">.message_chat { width: 100px; height: 300px; position: fixed; background: black; right: 0px; bottom: 5px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href="#" class="chat_div" id="1">friend 1</a></li> <li><a href="#" class="chat_div" id="2">friend 2</a></li> <li><a href="#" class="chat_div" id="3">friend 3</a></li> </ul> <div class="chatboxholder"></div>

jquery css