How to add table column next to current column

Question

I want to add TD and TH next to my current column. This should be add When i click on links.

Here is HTML:

<section class="yield-report-table">
  <table id="sorting">
    <tr class="headerrow ui-sortable">
      <th class="ui-resizable tac"><div class="ui-resizable">First Year Corn <br>Non Limited N, High Pop(1)</div></th>
      <th class="ui-resizable tac"><div class="ui-resizable">First Year Corn <br>Non Limited N, High Pop(2)</div></th>
    </tr>
    <tr>
      <td>
        <div class="report-icon-list bg-l-green">
          <a href="#" class="cht-add"><span><i class="cht-sprite">1</i></span></a>
        </div>
      </td>

      <td>
        <div class="report-icon-list bg-l-green">
          <a href="#" class="cht-add"><span><i class="cht-sprite">2</i></span></a>
        </div>
      </td> 
    </tr>
  </table> 
</section>

JS:

<script>
  $(function() {
    $('.report-icon-list .cht-add').on("click",function(){
      $i = $(".report-icon-list .cht-add").parents("td").index(this);
      $n = $(".report-icon-list .cht-add").parents("#sorting tr th").index(this);
      $(this).parents("td:eq("+$i+")").after("<td>discription</td>");
      $("#sorting tr th:eq("+$n+")").after("<th>heading</th>");
      alert($n)
  });
</script>

I am able to append the td next to current column. But th are getting append at last columns of tr(row).

Working example: http://codepen.io/anon/pen/BjoGZm

Current:

Expected:

Answer 1

$(function() {
    $('.report-icon-list .cht-add').on("click",function(){
        var td = $(this).parent().parent();
        var $i = td.index();
        td.after("<td>discription</td>");
        $("#sorting tr.headerrow > th:eq(" + $i + ")").after("<th>heading</th>");
    });
})

Try this code please, is this your need?