在表格中使用按钮平均添加行和列

Question

有人可以在这里给我一点帮助我坚持这个我没有更多的想法，我的问题是，在这个表中我能够添加一行和一列但是当我添加例如一行而且有现在有5行，但是当我尝试添加一个列时，它不知道如何匹配单元格数量和行数一样多，它看起来像这样：

<table class="optionsForm" id="table_id" style="width:100%">
            <tbody>
              <tr >
                <th> 
                  </th>  @for($c = 1; $c<=4; $c++)
                    <th id="column{{ $c}}">   
                      <input type="text" name="columns[{{ $c }}]"  
                      class="form-control" placeholder="Column {{ $c }} "> 
                    </th>
                    @endfor
                  </tr>  
                  @for($r = 1; $r<=4; $r++)
                    <tr id="option{{ $r }}">
                      <td>
                        <input type="text" name="rows[{{ $r}}]"   class="form-control" placeholder="Row {{ $r }} ">
                        <div id="column{{ $r }}">
                          <td>
                            <input type="radio" name="col_nr[{{ $r  }}]" value="1" class="col1">
                          </td>
                          <td>
                            <input type="radio" name="col_nr[{{ $r  }}]" value="2" class="col2">
                            <input type="hidden" name="row_nr[{{ $r  }}]" value="{{ $r  }}" class="col2">
                          </td>
                          <td>
                            <input type="radio" name="col_nr[{{ $r  }}]"  value="3" class="col3">
                            <input type="hidden" name="row_nr[{{ $r  }}]"  value="{{ $r  }}" class="col3">
                          </td> 
                          <td>
                            <input type="radio" name="col_nr[{{ $r  }}]" value="4" class="col4">
                            <input type="hidden" name="row_nr[{{ $r  }}]"  value="{{ $r  }}" class="col4">
                          </td></div>
                          <input type="hidden" value="[0]" class="row_col_nr{{ $r  }}">
                        </tr>
                        @endfor
                        <tr> 
                        </tr>
                      </tbody>
                    </table>                          <button style="margin:8px;" type="button" value="{{$c}}" class="btn btn-flat btn-default btn-sm"
                         id="delete_column" title="@lang('buttons.remove_option')">
                         <i class="fa fa-trash-o" aria-hidden="true">
                         </i>
                       </button>

                       <button type="button" class="btn btn-flat btn-primary btn-sm" id="add_column" title="@lang('buttons.add_new_option')">
                        <i class="fa fa-plus"></i>
                      </button>

这里我有javascript代码：

var i = 4;
  var r = 4;
  var p = 1;


  $(document).ready(function () {
     var totalRowCount = $("#table_id tr").length;
   var rowCount = $("#table_id td").closest("tr").length; 

    $('#add_option').click(function () {
      rowCount++;
      i++;
      r++;
      $('.optionsForm').append('<tr id="option' + rowCount + '"><td><input type="text" name="rows['+ r +']" class="form-control" placeholder="Row ' + rowCount +' "><td><input type="radio" name="col_nr['+ rowCount +']"  value="1" class="col1" ></td><td><input type="radio" name="col_nr['+ rowCount +']" value="2" class="col1" ></td><td><input type="radio" name="col_nr['+ rowCount +']"   value="3" class="col1" ></td><td><input type="radio" name="col_nr['+ rowCount+']"value="4" class="col1" ></td></tr>');
      $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
      increaseArea: '20%' // optional
    });
    });
    $(document).on('click', 'button[id=delete_option]', function () {
      console.log('test');
      if (i > 1) {
        var removeValue = $(this).val();
        console.log(removeValue);
        $('#option' + removeValue).remove();
        --i;
      }
    }
    );
  }
  );
</script>
<script type="text/javascript">
 var i = 1;
 var p = 4;
   var totalColCount = $("#table_id th").length;
            var col_count = totalColCount - 1;   
 $(document).ready(function(){
  $("#add_column").click(function (){
    p++;
    col_count++;
    var trow;   
    var columnContent = ['<input type="text" name="options'+ i +'" value="{{ old('options. + p +') }}"  class="form-control" placeholder="Column ' + col_count +' ">', '<input type="radio" name="col_nr['+ i +']"  value="1" class="col1" >', '<input type="radio" name="col_nr['+ i +']" value="2" class="col1" >', '<input type="radio" name="col_nr['+ i +']" value="3" class="col1" >', '<input type="radio" name="col_nr['+ i +']" value="4" class="col1" >'];

    for(var i=0; i<columnContent.length; i++){
      r++;
      if(i==0){
        $('.optionsForm ').find('tr:eq(' + i + ')').append('<th>' + columnContent[i] + '</th>');
        $('.optionsForm').append('<tr id="option' + r + '"><td><input type="text" name="rows['+ r +']" class="form-control" placeholder="Row ' + r +' "><td><input type="radio" name="col_nr['+ r +']"  value="1" class="col1" ></td><td><input type="radio" name="col_nr['+ r +']" value="2" class="col1" ></td><td><input type="radio" name="col_nr['+ r +']"   value="3" class="col1" ></td><td><input type="radio" name="col_nr['+ r+']"value="4" class="col1" ></td><td><input type="radio" name="col_nr['+ r+']"value="5" class="col1" ></td></tr>');

      } else {
        $('.optionsForm ').find('tr:eq(' + i + ')').append('<td>' + columnContent[i] + '</td>');
      }
    }

    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
          increaseArea: '20%' // optional
        });
  });