jQuery dialog within div
===

I have a div with a link and on click should open a jQuery dialog above/within the div itself with fadein and out. 
http://img593.imageshack.us/img593/9852/exampled.jpg

HTML

    <div id="dialog" title="Basic dialog" style="display: none">Add to cart</div>

Jquery

> $('.div').click(function(){
> 
>     $('#dialog').fadeToggle();
> 
> })​

CSS

    .div{
    background-color: #fff;
    border: 1px solid #FFECA2;
    width: 123px;
    text-align: center;
    padding: 3px 9px;
    position:relative;
    }
    
        #dialog{
            display:block;
            position:absolute;
            display:none;
            left:0; top:0;
            width:100%; height:100%;
        background-color: #FFFEDF;
        border: 1px solid #FFECA2;
        width: 123px;
        text-align: center;
        padding: 3px 9px;
        }​

The fiddle: http://jsfiddle.net/725Me/


Now, the problem is: if i have **a lot of div**, I must define

`<div id="dialog"> Add to cart </ div>` for each div?

how can i define it once?