Find Table Row Index for Dynamically Generated Table
<p><strong>Here is my scenario:</strong></p>

<p>I have a table that displays the Name, Age, and Details content on each row. When a user selects the <code>Details</code> button, it should trigger a modal and show additional content specific to that Person in the table.</p>

<p><strong>Issue at hand:</strong></p>

<p>I am using <code>Razor syntax</code> and dynamically generating the rows within the table.</p>

<blockquote>
  <p><strong>Question:</strong> How can I get the row index value for that specific row when selecting the <code>Details</code> button</p>
</blockquote>

<p><strong>Additional Notes:</strong> </p>

<p>I did some research online, but couldn't find anything that helped me in my scenario.</p>

<p><strong>Html</strong></p>

<pre><code>&lt;div class="col-md-12"&gt;
    &lt;table class="table table-striped"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Age&lt;/th&gt;
            &lt;th&gt;Details&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        @foreach (var viewModel in Model)
        {
            &lt;tr&gt;
                &lt;td&gt;@viewModel.Name&lt;/td&gt;
                &lt;td&gt;@viewModel.Age&lt;/td&gt;
                &lt;td&gt;&lt;button onclick="PersonViewModel(this)" type="button" class="btn btn-success" data-toggle="modal" data-target="#details-modal"&gt;&lt;span class="fa fa-external-link-square"&gt;&lt;/span&gt; Details&lt;/button&gt;&lt;/td&gt;
            &lt;/tr&gt;
        }
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>function PersonViewModel(x) {
    $('body').on('click', 'a.showMore', function(event) {
        var rowIndex = $(this).closest('tr').index();
        alert("Row index is: " + rowIndex);
    });
}
</code></pre>