title: Hide the button in the last row of the table using Javascript
body: <p>Here's my html</p>
  
  <pre><code>  &lt;table class="table table-responsive table-bordered" style="width:100%" id="HeightConfig"&gt;
      &lt;tbody id="HeightConfigBody"&gt;
  @if (Model != null)
  {
  @foreach (var data in Model.Reverse())
  {
       &lt;tr&gt;
                           &lt;td style="width:40%"&gt;
    &lt;label&gt;&lt;b&gt;Recorded Time:&lt;/b&gt; &lt;input type="text" id="recordDate"  class="recordDate"   
    value="@data.recordDate.ToString("yyyy-MM-dd")" disabled&gt;&lt;/label&gt;
                        &lt;/td&gt;
  
  
  
                         &lt;td style="width:40%"&gt;
                           &lt;label&gt;&lt;b&gt;Height (CM):&lt;/b&gt; &lt;input type="text" id="ColumnTypeData" class="ColumnTypeData" 
                            value="@data.ColumnTypeData" &gt;&lt;/label&gt;
                        &lt;/td&gt;
  
                        &lt;td style="width:40%"&gt;
                             &lt;a class="btn btn-primary btn-default" title="delete"
                              data-target="#modal-container" data-toggle="modal" data-align="center"&gt;
                              &lt;div id="minusHeight"&gt;&lt;i class="fa fa-minus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
                              &lt;/a&gt;
  
  
       &lt;a class="btn btn-primary btn-default" title="add"  &gt;
                                &lt;div id="addHeight" &gt;&lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
       &lt;/a&gt;
                         &lt;/td&gt;
  
  &lt;/tr&gt;
  
  }
  }
  
       &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>I need to hide the "plus button" in the third column, and display only in the last row.</p>
  
  <p>this is what I got</p>
  
  <pre><code>&lt;script&gt;
   debugger;
          var x = document.getElementById("HeightConfig").rows.length;
          var ctr = 1
          $("#HeightConfig tbody tr").each(function (key, value) {
              debugger;
  
              if (ctr != x)
              {
                  $(this).find('.addHeight').hide();
  
              }
              ctr++;
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>i get first the length of the table, then loop on each row, then when the counter match the last row of the table it will not hide the button</p>