http://dpaste.com/117315/
my html ------- {% for name in eventname %} <div id={{ name }} class="viewalldetailslinktext"> <div class="eventname"><a href='#' class='basic'>{{ name.title }}</ a></div> </div> <div class="eventaddress">{{ name.address }}</div> <div class="eventdesc">{{ name.summary }}</div> <div id="basicModalContent" style='display:none'> <div style="color:red">{{ name.title }}</div> </div> {% endfor %} basic.js --------- $(document).ready(function () { $('#basicModal input.basic, #basicModal a.basic').click(function (e) { e.preventDefault(); $('#basicModalContent').modal(); }); }); here i am using lightbox. in my template i have 2 title when i am clcking on one title it works fine and display light box but for second title it does not happened so cause when i saw in page source both div have same id basicModal. so that's why i am generating different div id {% for name in eventname %} <div id={{ name }} class="viewalldetailslinktext"> <div class="eventname"><a href='#' class='basic'>{{ name.title }}</ a></div> </div> <div class="eventaddress">{{ name.address }}</div> <div class="eventdesc">{{ name.summary }}</div> <div id="basicModalContent" style='display:none'> <div style="color:red">{{ name.title }}</div> </div> {% endfor %} so now my div id is <div id="The" spice="" tate-le="" jardin="" class="viewalldetailslinktext"> <div class="eventname"><a href="#" class="basic">The Spice Tate-Le Jardin</a></div> <div id="Underground" monday="" at="" maya="" class="viewalldetailslinktext" style="text-align: left; margin-top: 20px;"> <div class="eventname"><a href="#" class="basic">Underground Monday at Maya</a></div> but i do not how may i pass this div id to function which is defined in basic.js i am trying to do like this $(document).ready(function (id) { $(id input.basic, id a.basic').click(function (e) { e.preventDefault(); alert(e); $('#basicModalContent').modal(); }); }); but lightbox is not coming. in view source div id is generationg linke this <div id="The" spice="" tate-le="" jardin="" class="viewalldetailslinktext" style="text-align: left; margin-top: 20px;"> <div class="eventname"><b><a href="#" class="basic">The Spice Tate- Le Jardin</a></b></div>