JQuery: Master Detail Table/SubTable

JQuery: Master Detail Table/SubTable

I have a table with 4 columns:
GL ID# GL Entry Date Description
3137 06/26/2017 Invoice #18319: Date: 06/26/2017
GL ID# Debit Account Credit Account Debit Amount Credit Amount
3137 105 185
3137 415 185
The first 3 columns are id, date, and description. The forth column is the detail subtable. I used JQuery to Move the subtable to a new row and added a toggle. My problem is that after applying my code only every other detail toggle works and shows the details subtable. Row 1 won't expand.  Row 2 acts normally.  Row 3 won't expand.  Row 4 acts normally.  I'm not super versed in JQuery, Yet, so I was having trouble finding the error. Included is the code and a JSFiddle: Master/Detail Example .   I believe that my error is in the scope of my toggle statement, but cannot find it.  Could anyone help?


$(document).ready(function () {
      var size = $("#gridT > thead > tr > th").length; // get total # of columns
      var n = size.toString();

      $("#gridT > thead > tr").prepend("<th></th>"); //prepend column to header row
      $("#gridT > thead > tr > th").last().remove(); // remove last column header of master record
      $("#gridT > thead > tr > th").prepend("<th></th>");

      $("#gridT > tbody > tr").each(function () {
                $(this).prepend(
                  $("<td></td>")
                  .addClass("hoverEff")
                  .addClass("icon")
                  .addClass("icon-exposed")
                  .attr('title', "click to show/hide Details")
                );

                //Get sub table from last column and add this to the next new added row
                var table = $("table", this).parent().html();
                //add new row with this subtable
                $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
                $("table", this).parent().remove();

                // ADD CLICK EVENT FOR MAKE COLLAPSIBLE
                $('.hoverEff').click(function () {
                    var $pRow = $(this).parent('tr');
                    var $nextRow = $pRow.next('tr');
                    $nextRow.toggle();
                    $(this).toggleClass('icon-exposed icon-hidden');
                });

           });

            //by default make all subgrid in collapse mode
            $("#gridT > tbody > tr td.icon-exposed").each(function () {
                $(this).toggleClass("icon-hidden icon-exposed");
                $(this).parent().closest("tr").next().toggle();
            });

});