动态地将行添加到某个表

Question

	//Add Time Row
var addTimeRow = function(id){
    html = '<tr id="times_'+i+'">';
    html += '<td><p>test</p></td>';
    html += '</tr>';

    if( typeof id !== "undefined"){
        $('#times_'+id).after(html);
    }else{
        $('table').append(html);
    }
    $('#times_'+i).focus();
    i++;
}

// Adds row on add time click
$(document).on('click','.add_time',function(){
    var add_time_id = $(this).attr('id');
    var add_time_arr = add_time_id.split("_");
    var time_id = add_time_arr[add_time_arr.length-1];
    addTimeRow(time_id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1">
  <tr id="times_1">
    <td>
	  <span class="add_time" id="add_icon_1"> 
        <i class="fa fa-plus-circle fa-2x"></i>TD Add Icon (Font Awesome)
      </span>
    </td>
    <td>
      Desired result should pop up here on icon click as "test"
    </td>
  </tr>
</table>

在下面的代码中，我将添加了表行的jQuery复制到“t1_”，尝试对我的代码中使用id为“times_”的另一个表执行相同操作。无论出于何种原因，它都不起作用。我错过了一些明显的东西吗？

//php
   <?php foreach ( $table['one'] as $key=>$item){?>
    <tr id="t1_<?php echo $key+1?>">

    <?php foreach ( $table['two'] as $key=>$item){?>
    <tr id="times_<?php echo $key+1?>">
    <span class="add_time" id="add_icon_1"> <i class="fa fa-plus-circle fa-2x"></i></span>
// jquery
    var addTableRow = function(id){
        html = '<tr id="times_'+i+'">';
        html += '<td><p>test</p></td>';
        html += '</tr>';

        if( typeof id !== "undefined"){
            $('#times_'+id).after(html);
        }else{
            $('table').append(html);
        }
        $('#times_'+i).focus();
        i++;
    }
$(document).on('click','.add_time',function(){
    var add_time_id = $(this).attr('id');
    var add_time_arr = add_time_id.split("_");
    var time_id = add_time_arr[add_time_arr.length-1];
    addTimeRow(time_id);
});

鼠标点击后，所需的输出为：

测试