How to pass multiple values to Bootstrap pop-up from anchor tag?
<p>I am displaying some fields in a table with labels and also an anchor tag to edit the data.</p>

<p>When the user clicks the Edit Link, the pop is shown with Current Value and also have a textbox to Update the Value with new one.</p>

<p>I want to pass the current value of Lable to the pop-up and also the column name which will be hidden from the user by which I can easily get the column name which have to be updated.</p>

<p>I want to pass column name because there many fields in this page but I have developed only one pop-up for all, so the data which will shown in pop-up will be dynamic as it depends upon the anchor which was clicked.</p>

<p>This is My Modal-PopUp Code :</p>

<pre><code>  &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
            &lt;div class="modal-dialog"&gt;
                &lt;div class="modal-content"&gt;

                    &lt;div class="modal-header"&gt;
                        &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                        &lt;h4 class="modal-title" id="myModalLabel"&gt;Edit Information&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-3"&gt;
                              Current Value :
                          &lt;/div&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;asp:TextBox CssClass="txtstyle" runat="server" ID="Curr_Val"&gt;&lt;/asp:TextBox&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                        &lt;div class="row"&gt;
                          &lt;div class="col-md-3"&gt;
                              New Value :
                          &lt;/div&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;asp:TextBox CssClass="txtstyle" runat="server" ID="New_Val"&gt;&lt;/asp:TextBox&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                        &lt;button type="button" class="btn btn-primary"&gt;Save Changes&lt;/button&gt;
                        &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                    &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>Here I am calling the Modal Pop-up :</p>

<pre><code>     &lt;th style="width:15%;"&gt;First Name :&lt;/th&gt;
 &lt;td style="width:18%;"&gt;
&lt;asp:Label runat="server" ID="lbl_fname"&gt;&lt;/asp:Label&gt;
&lt;span&gt; &lt;a href="#" data-toggle="modal" data-target="#myModal"&gt;                                                                 &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;                                                           &lt;/a&gt; &amp;nbsp;&amp;nbsp;
 &lt;i class="fa fa-exclamation-triangle" aria-hidden="true"&gt;&lt;/i&gt;   
 &lt;/span&gt;
 &lt;/td&gt;
</code></pre>

<p>I've gone through many links but couldn't fine the solution for passing multiple values.</p>

<p>Can any any one please help me.</p>

<p>Thanks in advance.</p>

<p><strong>EDIT</strong></p>

<p>I tried the following code using javascript but it still not working :</p>

<pre><code> &lt;script type="text/javascript"&gt;
        $(function () {

            $(".edit").click(function () {

                var tr = $(this).parent().parent();
                var tdRecords = $(tr).children();
                var firstName = $(tdRecords[0]).text();
                var lastName = $(tdRecords[1]).text();

                $("#Curr_Val").val(firstName);

                $('#myModal').modal('show');
            });
        });
    &lt;/script&gt;
     &lt;script type="text/javascript"&gt;
     var $ = jQuery;
     $(document).ready(function () {
     var selectedTab = $("#&lt;%=hfTab.ClientID%&gt;");
     var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
     $('#dvTab a[href="#' + tabId + '"]').tab('show');
     $("#dvTab a").click(function () {
     selectedTab.val($(this).attr("href").substring(1));
     });
       });
  &lt;/script&gt; 

  &lt;style&gt;
  body {
  text-align:left;
  color:#000000;
    }
  &lt;/style&gt;
     &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
 &lt;/asp:ScriptManager&gt;
  &lt;!-- Top content --&gt;
   &lt;div class="top-content"&gt; 

     &lt;div class="inner-bg"&gt;
        &lt;div class="container" style="margin-top:-50px;"&gt;                   
           &lt;div class="row"&gt;
                &lt;div class="col-sm-12 myprofilediv" style="vertical-align:central;"&gt;                    
                   &lt;div class="panel panel-default" style="padding:10px;"&gt;
                     &lt;div class="row"&gt;
                        &lt;div class="col-md-3 col-md-offset-9"&gt;
                           &lt;a class="btn btn-link-1" href="MyProfile.aspx?do=edit" style="font-weight:bold; float:right;"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;Edit My Profile&lt;/a&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                    &lt;h1 class="wow fadeInLeftBig profilehead"&gt;My Profile&lt;/h1&gt;&lt;br /&gt;
                                &lt;div id="dvTab"&gt;
                                    &lt;ul class="nav nav-tabs" role="tablist"&gt;
                                        &lt;li&gt;&lt;a href="#personal" aria-controls="personal" role="tab" data-toggle="tab"&gt;Personal Information&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#fund" aria-controls="pf" role="tab" data-toggle="tab"&gt;Fund Nominee&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#edu" aria-controls="edu" role="tab" data-toggle="tab"&gt;Education Details&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#fam" aria-controls="fam" role="tab" data-toggle="tab"&gt;Family Details&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab"&gt;Employment History&lt;/a&gt;&lt;/li&gt;

                                    &lt;/ul&gt;
                                    &lt;div class="tab-content"&gt;
                                        &lt;div id="personal" role="tabpanel" class="tab-pane active"&gt;

                                            &lt;table style="height:15%;" class="table"&gt;
                                                   &lt;tr&gt;
                                                       &lt;td style="width:60%;"&gt; &lt;br /&gt;   &lt;h3 style="text-align:center;"&gt;Personal Information&lt;/h3&gt; &lt;/td&gt;
                                                       &lt;td style="width:12%;"&gt;&lt;br /&gt;&lt;asp:Image runat="server" ImageUrl="ImgHandler.ashx?typ=profile&amp;emp=46" /&gt;&lt;/td&gt;
                                                   &lt;/tr&gt;
                                               &lt;/table&gt;
                                            &lt;br /&gt;
                                            &lt;table class="table-responsive table table-bordered mytable"&gt;
                                            &lt;tr&gt;
                                                &lt;th style="width:15%;"&gt;First Name :&lt;/th&gt;
                                                &lt;td style="width:18%;"&gt;
                                                    &lt;asp:Label runat="server" ID="lbl_fname"&gt;&lt;/asp:Label&gt;

                                                        &lt;%-- &lt;a href="#" data-toggle="modal" data-target="#myModal"&gt;--%&gt;
                                                       &lt;a class="edit" href="#"&gt;
                                                             &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
                                                         &lt;/a&gt;
                                                       &amp;nbsp;&amp;nbsp;
                                                       &lt;i class="fa fa-exclamation-triangle" aria-hidden="true"&gt;&lt;/i&gt;


                                                &lt;/td&gt;
                                                &lt;th style="width:13%;"&gt;Middle Name :&lt;/th&gt;
                                                &lt;td style="width:20%;"&gt;
                                                    &lt;asp:Label runat="server" ID="lbl_mname"&gt;&lt;/asp:Label&gt;
                                                &lt;/td&gt;
                                                &lt;th style="width:18%;"&gt;Last Name :&lt;/th&gt;
                                                &lt;td style="width:20%;"&gt;
                                                    &lt;asp:Label runat="server" ID="lbl_lname"&gt;&lt;/asp:Label&gt;
                                                &lt;/td&gt;
                                            &lt;/tr&gt;
</code></pre>