Light Box withing GridView Template Feild.

Hi,
In my web application there was a function to send Messages. I used jquery Light Box to pop up the message form. But when i hit GridView button for each row, it display only firstly created light box every time. Take a lookat code so u can understand.

<ItemTemplate>
<asp:Label ID="mn" runat="server" Text='<%#Eval("MobileToNum") %>' CssClass="dn"></asp:Label>
<a href="#" runat="server" id="cli" data-reveal-id="m" class="phone-number-click my-anc"><img src="../images/SMS.jpg" /></a>

<asp:Label ID="smsresultlbl" runat="server" Font-Size="XX-Small" Font-Bold="true"></asp:Label>
   <div id="m" class="reveal-modal mydiv">
   <table class="noborder">
<tr>
<td>Mobile No:</td><td><asp:TextBox ID="mobileNoTxt" runat="server" CssClass="textarea-medium"></asp:TextBox><%-- <asp:RequiredFieldValidator
ID="RequiredFieldValidator1" runat="server" ErrorMessage="Enter Mobile Number" ControlToValidate="mobileNoTxt" ValidationGroup="sms" Display="Dynamic"></asp:RequiredFieldValidator>--%></td>
</tr>
<tr><td></td><td><asp:Button ID="confirmbtn" runat="server" onclick="confirmbtn_Click" Text="Send"></asp:Button></td></tr>
</table>
   <a class="close-reveal-modal">×</a>
  </div>  
                </ItemTemplate>
 

The reason was data-reveal-id and pop up div id not in same name. I used javascript code for match these.

<script type="text/javascript">

     $(".phone-number-click").click(function() {
         //console.log($("span", $(this).parent()).html());
         $("#" + $(this).attr("mobnum")).val($("span", $(this).parent()).html());
     });

     $(".my-anc").each(function(e) {
         var id = "id-" + e;
         $(this).attr("data-reveal-id", id);
         $(".mydiv:eq(" + e + ")").attr("id", id);
     });

   </script>