Add an extra div below each table row using JQuery

I have an MVC 4 application where one of my views looks something like this:

and the corresponding code for this view:

<tbody>
   @foreach (var item in Model)
      {
        <tr id="document-row-@item.DocumentId">
           <td>                        
               @Html.DisplayFor(modelItem => item.DocumentName)
                 <div id="document-detail-contentsREVW">

                 </div>
           </td>

           <td>
               @Html.DisplayFor(modelItem => item.CreatedDate)
                  <div class="pull-right"> 
                           @Ajax.ActionLink("Details", "DocumentDetail", "Documents", new { Area = "SmartDocs", id = item.DocumentId.ToString() , currentStatus = item.CurrentStatus.ToString()}, new AjaxOptions
                        {
                           InsertionMode = InsertionMode.Replace,
                           HttpMethod = "GET",
                           LoadingElementId = "ajax-loader",
                           UpdateTargetId = "document-detail-contentsREVW",
                        }, new { @class = "details-link" })

                 </div>
            </td>
        </tr>
     }

      

        
        
        
      

    

Now when I click on the Details link, one controller action method is called and the details for that record are only shown below the first row in a tabular format inside document-detail-contentsREVW as used in my opinion and can be thought of as:

which is the details for the first entry. Once again, if I click on the details for the third or any other entry, the position for showing the detail is the same as shown in the following image:

Here I want the details to appear just below the specific post for which the link was clicked. The functionality works fine. Also on clicking the details I can toggle (hide / unhide) the details of the div.

I feel like the position for using my div inside the tr is wrong and hence every time the same place is updated when verbosely clicked.

I have searched this a lot and even found many scripts to achieve this. For example: http://jsfiddle.net/ME3kG/30/ (I want something like this)

But here the details are pre-recorded and used at the click of an icon. But in my case, I will get the details dynamically after clicking the details link for this entry. I think I understand my requirement. So can this be done with jquery or how can I achieve this? .. Thanks in advance.

Below is my script:

   $(function () {
        $('.details-link').on('click', function (e) {
            e.preventDefault();
            $(this).closest('tr').find('.document-details').toggle();
            $(this).text(function (i, v) {
                return v === 'Details' ? 'Hide' : 'Details';
            });
        });
    });