最近发现无法正常工作的jQuery

Question

I have a Bootstrap Tab and a Table within the Tab and within the Table, a row with input fields. The problem I am experiencing is when I have multiple rows within the table only the first row values get pulled. I am using 'closet' and 'find' but I'm not getting the desired values. What am I doing wrong?

<ul class="nav nav-tabs nav-justified itemTab">
<li><a href="#tab5" data-toggle="tab">Inbox</a></li> 
<li><a href="#tab6" data-toggle="tab">Outbox</a></li>
</ul>
<div class="tab-content itemTab">
<div class="tab-pane fade in" id="tab5">
    <table class="table table-condensed" id="utable">
        <th>Location</th>
        <th>Department</th>
        <th>HD Number</th>
    @foreach (var item in Model.items)
    {
        <tr class="@item.Id">
        <div class="accordian-body collapse in" id="@item.Id">
            <input type="text" class="form-control" id="loc">
            <input type="text" class="form-control" id="dept">
            <input type="text" class="form-control" id="hdnum">
        </div>
         <div class="row">
            <div align="center">
            <input type="submit" value="Transfer" class="btn btn-success" onclick="MoveItem(@item.Id)" id="moveButton" data-url="@Url.Action("Submit", "Item")" />
            </div>
        </div>
        </tr>
    }
    </table>
    </div>
    <div class="tab-pane fade in" id="tab6">
    @Html.Action("Outbox", "Item") 
    </div>


   function MoveItem(id) {
   var row = $('#' + id).closest('.itemTab');
   var loc = $(row).find('#loc').val();
   var dept = $(row).find('#dept').val();
   var hdnum = $(row).find('#hdnum').val();
   }

Answer 1

First, wrap the id value in quotes when generating parameter for MoveItem call:

onclick="MoveItem('@item.Id')"

Second, change your repeating id's to classes and go up only as far as the parent tr :

<input type="text" class="form-control" class="loc">

function MoveItem(id) {
  var row = $('#' + id).closest('tr');
  var loc = $(row).find('.loc').val();
}

Answer 2

Your closest

var row = $('#' + id).closest('.itemTab');

gets the tab - but all of the "rows" are in that tab.

Instead, get the "row"

var row = $('#' + id).closest('tr'); 

then the finds will find the item in the relevant row.