Getting the individual details
<p><strong>form:</strong></p>

<pre><code>&lt;label&gt;First Name:&lt;/label&gt;&lt;input type="name" class="form-control" id="fname"&gt;
&lt;label&gt;Last Name:&lt;/label&gt;&lt;input type="name" class="form-control" id="lname"&gt;
&lt;button class="btn btn-primary" id="add"&gt;Add&lt;/button&gt;
</code></pre>

<p>I am adding the first name and last name into the table if i click on add button.</p>

<p><strong>table:</strong></p>

<pre><code>&lt;table class="table table-bordered" id="table"&gt;
    &lt;thead&gt;&lt;tr&gt;&lt;td&gt;S.N.&lt;/td&gt;&lt;td&gt;First Name&lt;/td&gt;&lt;td&gt;Last Name&lt;/td&gt;&lt;td&gt;Options&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;
    &lt;tbody id="tbody"&gt;&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p><strong>jQuery:</strong></p>

<pre><code>$(function(){
    var i=0;
    $(document).on('click', '#add', function (e) 
    { 
        e.preventDefault();
        var fname=$('#fname').val();
        var lname=$('#lname').val();
        if(fname=='' || lname=='')
        {
            swal('Both fields are required!');
        }
        else
        {
            i++;
            $('#tbody').append('&lt;tr&gt;&lt;td&gt;'+i+'&lt;/td&gt;&lt;td&gt;'+fname+'&lt;/td&gt;&lt;td&gt;'+lname+'&lt;/td&gt;&lt;td&gt;&lt;button id="view" class="btn btn-info"&gt;Details&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
            $('#showf').append(fname);
            $('#showl').append(lname);
        }

        document.getElementById('fname').value = "";
        document.getElementById('lname').value = "";
    });
});
</code></pre>

<p>Now, I need to show respective first name and last name if I click on details.</p>

<pre><code>$(document).on('click', '#view', function (e) {
    swal('I am trying. ...');
});
</code></pre>