title: Gridview Edit Bootstrap Modal Dialog populating first row only
body: <p>I have a gridview with template column for edit button, which opens a bootstrap modal dialog with data populated without a postback.</p>
  
  <p>Here's the Gridview :</p>
  
  <pre><code>&lt;asp:GridView ID="gvLocAddresses" runat="server" CssClass="table table-bordered table-striped table-condensed"
                  GridLines="None"  AllowSorting="false" PageSize="25" AutoGenerateColumns="false" &gt;
          &lt;Columns&gt;
              &lt;asp:TemplateField HeaderText="Edit" &gt;
                  &lt;ItemTemplate&gt;
                      &lt;a id="editLocAddress" href="#dlgLocAddress"  data-toggle="modal" role="button" onclick="EditLocAddress();"  
                          data-id="&lt;%# DataBinder.Eval (Container.DataItem, "Id") %&gt;" 
                          data-IsPrimary = "&lt;%# DataBinder.Eval(Container.DataItem, "IsPrimary") %&gt;"
                          data-Address1 = "&lt;%# DataBinder.Eval(Container.DataItem, "Address1") %&gt;"
                          data-Address2 = "&lt;%# DataBinder.Eval(Container.DataItem, "Address2") %&gt;"
                          data-City = "&lt;%# DataBinder.Eval(Container.DataItem, "City") %&gt;"
  
                          &gt;&lt;i class="icon-edit"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/ItemTemplate&gt;                        
              &lt;/asp:TemplateField&gt; 
  </code></pre>
  
  <p>This is the modal dialog :</p>
  
  <pre><code>&lt;div id="dlgLocAddress" class="modal hide fade" tabindex="-1" role="dialog" 
  aria-hidden="true" style="width: 475px;"&gt;
  &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;
          ×&lt;/button&gt;
      &lt;h3 id="dlgAddLocAddrLBL"&gt;Add Address&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span2 text-right"&gt;
              &lt;label for="txtAddrLine1"&gt;Address Line1&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="span3"&gt;
              &lt;input id="txtAddrLine1" type="text" class="text ui-widget-content ui-corner-all" /&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  
       &lt;div class="row"&gt;
          &lt;div class="span2 text-right"&gt;
              &lt;label for="txtAddrLine2"&gt;Address Line2&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="span3"&gt;
              &lt;input id="txtAddrLine2" type="text" class="text ui-widget-content ui-corner-all" /&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="span2 text-right"&gt;
              &lt;label for="txtCity"&gt;City&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="span3"&gt;
              &lt;input id="txtCity" type="text" class="text ui-widget-content ui-corner-all" /&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And Heres my Jquery function :</p>
  
  <pre><code> function EditLocAddress() {
         var $editLAddr = $('#editLocAddress'),
              addressid = $editLAddr.data('id'),
  
  
         $(".modal-body #txtAddrLine1").val($editLAddr.data('address1'));
         $(".modal-body #txtAddrLine2").val($editLAddr.data('address2'));
         $(".modal-body #txtCity").val($editLAddr.data('city'));
  
     }
  </code></pre>
  
  <p>Now, when I click Edit, the dialog button always populates the first row. I am new to Jquery and client side programming. Can someone please help. </p>
  
  <p>Thanks,
  Sri</p>