Get hidden fields from currently clicked td and first td of the current row

Question

Consider a scenario

I have one table and having 8 columns, Each columns have some number of hidden fields - let's say 5 hidden fields.

What I'm trying to achieve is to get all the hidden fields' value when I click on particular cell and I also want hidden values from the first td of the currently clicked row from [cell]

Things achieved

I'm able to get the hidden field values of the currently clicked row cell's first child like following

element.closest("tr").find("td:first").find("input:hidden")

This will reult 3 as the first cell will always have 3 inputs.

Where I am stuck:

I'm getting the first cell's hidden inputs value but not able to get hidden inputs value of currently clicked cell.

Here is the sample HTML

<table>
   <tr>
      <td style="width: 50px;">4th Class( A ) 
         <input id="SectionID" name="SectionID" type="hidden" value="7">
         <input id="SectionDetailID" name="SectionDetailID" type="hidden" value="1">
         <input id="SectionName" name="SectionName" type="hidden" value="4th Class( A ) ">
      </td>
      <td class="cells" onclick="fetchData(this);">
         <div>
            <div class="dataRow">
               <div class="cellLabel">Name:</div>
               <div class="cellValue">P D S</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Sub:</div>
               <div class="cellValue">Hindi</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Period:</div>
               <div class="cellValue">Period 2</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">From:</div>
               <div class="cellValue">11:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">To:</div>
               <div class="cellValue">12:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Year:</div>
               <div class="cellValue">2014</div>
            </div>
         </div>
         <input id="TimeTableDtlID" name="TimeTableDtlID" type="hidden" value="1">
         <input id="TimeTableHdrID" name="TimeTableHdrID" type="hidden" value="7">
         <input id="PeriodID" name="PeriodID" type="hidden" value="38">
         <input id="PeriodName" name="PeriodName" type="hidden" value="Period 2">
         <input id="PeriodFromTime" name="PeriodFromTime" type="hidden" value="11:00">
         <input id="PeriodToTime" name="PeriodToTime" type="hidden" value="12:00">
         <input id="TTYear" name="TTYear" type="hidden" value="2014">
         <input id="SubjectName" name="SubjectName" type="hidden" value="Hindi">
      </td>
      <td class="cells" onclick="fetchData(this);">
         <div>
            <div class="dataRow">
               <div class="cellLabel">Name:</div>
               <div class="cellValue">J P Pl</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Sub:</div>
               <div class="cellValue">English</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Period:</div>
               <div class="cellValue">Period 2</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">From:</div>
               <div class="cellValue">11:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">To:</div>
               <div class="cellValue">12:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Year:</div>
               <div class="cellValue">2014</div>
            </div>
         </div>
         <input id="TimeTableDtlID" name="TimeTableDtlID" type="hidden" value="3">
         <input id="TimeTableHdrID" name="TimeTableHdrID" type="hidden" value="7">
         <input id="PeriodID" name="PeriodID" type="hidden" value="38">
         <input id="PeriodName" name="PeriodName" type="hidden" value="Period 2">
         <input id="PeriodFromTime" name="PeriodFromTime" type="hidden" value="11:00">
         <input id="PeriodToTime" name="PeriodToTime" type="hidden" value="12:00">
         <input id="TTYear" name="TTYear" type="hidden" value="2014">
         <input id="SubjectName" name="SubjectName" type="hidden" value="English">
      </td>
   </tr>
   </tbody>
</table>

jQuery

function fetchData(element) {
   var $element = $(element);
   var objHidden = [];
   console.log($element.closest("tr").find('td:first').andSelf().find("input:hidden").length); // Returns 19 Where it must be 11
   $element.closest("tr").find('td:first').andSelf().find("input:hidden").each(function (i, elem) {
      objHidden[elem.getAttribute("name")] = elem.value;
   });
   console.log(objHidden); // Getting same values always
}

Fiddle DEMO

EDIT

It's Simple scenario when I click on cell means TD except the first one, I want hidden values from the currently clicked cells and also hidden values from the first TD in current row which is not clicked.

How to get hidden fields of currently clicked cell and hidden fields of the closest row's first td?

Any kind of help is greatly appreciated.

Answer 1

andSelf and the last jQuery object into the current stack. But if we look closely at your line :

$element.closest("tr").find('td:first').andSelf().find("input:hidden")

You do .closest().find().andSelf(). So that mean andSelf return the .closest('tr').

Try to use add instead :

$element.closest("tr").find('td:first').add($element).find("input:hidden")

Alternatively, you could use that as well :

$element.siblings(":first").andSelf().find("input:hidden");