JQuery - заполнение подтаблицы под родительской строкой

Я пытаюсь заполнить или показать строку подтаблицы, когда нажимается «Уникальный идентификатор». Однако все, что я получаю, - это «undefined».

Я знаю, что мне нужен цикл или что-то, что должно пройти через индекс для подтаблицы (например, subTableData [i] .Description), но тогда моя функция щелчка не работает ..

Кто-нибудь может помочь мне в этом, пожалуйста?

HTML:

            <table id = "parentTable">
    <thead>
        <tr>
            <th>Unique ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Price</th>
            <th>Hours</th>
        </tr>
    </thead>
    <tbody id = "parentTableBody">
    </tbody>
</table>

<div id = "subTableContainer" style = "display: none;">
  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Arrival</th>
      </tr>
    </thead>
    <tbody id = subTableBody>
      <tr>

      </tr>
    </tbody>
  </table>
</div>

jQuery:

 $(document).ready(function(){ 
    var arr1 = generateItem();

if (arr1){
  var arr2 = [].concat(arr1); 
    var tr;
            $.each(arr2, function(i,e) {        
                tr = $('<tr>');
            tr.append("<td>" + "<a href='#'>" + (e.UniqueId || "") + "</a>" + "</td>");
                        tr.append("<td>" + (e.Name || "") + "</td>");
                        tr.append("<td>" + (e.Email || "") + "</td>");
                tr.append("<td>" + (e.Price || "") + "</td>");
                tr.append("<td>" + (e.Hours || "") + "</td>");     
            $('#parentTableBody').append(tr);

/*              tr = $('<tr>');
             tr.append("<td>" + (e.Description || "") + "</td>");
             tr.append("<td>" + (e.Arrival || "") + "</td>");
             $('#subTableBody').append(tr);  */
            }); 
   }
   });  

function generateItem(){
var item = [
{UniqueId: "0",Name: "Alex", Email: "[email protected]", Price: "$20.00", Hours: "1", Description: "N/A", Arrival: "Noon"}, 
{UniqueId: "1", Name: "Jay", Email: "[email protected]", Price: "$12.00", Hours: "0.2", Description: "Small", Arrival: "Morning"}, 
{UniqueId: "2" ,Name: "Dylan", Email: "[email protected]", Price: "$32.00", Hours: "2.2", Description: "Heavy", Arrival: "Night"}];

return item;
}

$(function(){      
      $('#parentTable tbody a').on("click", function(event) {
  var idName = $(event.target).text(),
    $baseRow = $(event.target).closest("tr");

  if ($baseRow.next("tr").find("table").length == 0) {
    var subTableData = generateItem(),

      subTableHTML = $("#subTableContainer table").clone(true),

      descriptionHTML = "<td>" + subTableData.Description + "</td>",
      arrivalHTML = "<td>" + subTableData.Arrival + "</td>";

    $baseRow.after("<tr><td colspan='4'></td></tr>");

    $baseRow.next("tr").find("td").append(subTableHTML);

    $baseRow.next("tr").find("#subTableBody tr").append(descriptionHTML).append(arrivalHTML);
  } else $baseRow.next("tr").remove();

});
});

Я вернул его обратно, по крайней мере, там, где работала функция щелчка. Спасибо

jsFiddle