无法添加到特定字段的新行

Question

我是jquery的新手，我试图在单击添加更多时为特定行创建新的输入字段。表中的数据来自数据库。它处于for循环下以获取数据。我需要在它下面的特定任务行字段中添加特定任务行字段，可能有n个行。

这是html代码，

 <table class="table table-hover">
    <thead>
    <tr>
    <th width="5%">#</th>
    <th width="25%">Task Name</th>
    <th width="12%">Amount</th>
    <th class="visible-lg">Description</th>
    <th width="12%">Date</th> 
    <th></th>
    </tr>
    </thead>
    <tbody>
    <?php
    if(count($arr_expense)>0)
    {
    for($i=0;$i<count($arr_expense);$i++)
    {   
    $taskId         =   $arr_expense[$i]['task_id'];
    $exp_id         =   $arr_expense[$i]['exp_id'];
    ?>
    <tr>
    <td class="visible-lg"><?php echo ($i+1)?></td>
    <td><?php echo $arr_expense[$i]['task_title'];?></td>
    <td class="visible-lg"><input type="text" class="form-control input-sm" id="amount_<?php echo $i?>" style="width: 74%;" name="amount_<?php echo $i?>"></td>
    <td><input type="text" class="form-control input-sm" id="description_<?php echo $i?>" name="description_<?php echo $i?>" ></td>
    <td><input type="date" class="form-control input-sm" id="exp_date_<?php echo $i?>" style="width: 90%;" name="exp_date_<?php echo $i?>"></td>
    <td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
    Add More</span></td>
    </tr>
    <?php   
    }
    }   
    else{
    ?>
    <tr>
    <td colspan="6">No Records Found!!!</td>
    </tr>
    <?php } ?>
    </tbody>
    <table id="addedRows">
    </table>
    </table>

这是我的Jquery代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var rowCount = 0;

function addMoreRows(frm) {
  rowCount++;
  var recRow = '<tr id="rowCount' + rowCount +
    '"> <td class="visible-lg"></td><td><td class="visible-lg"><input type="text" class="form-control input-sm" id="amount_' +
    rowCount + '" style="width: 74%;" name="amount_' + rowCount +
    '"></td><td><input type="text" class="form-control input-sm" id="description_' +
    rowCount +
    '" name="description_<?php echo $i?>" ></td><td><input type="date" class="form-control input-sm" id="exp_date_<?php echo $i?>" style="width: 90%;" name="exp_date_' +
    rowCount +
    '"></td> <td><a href="javascript:void(0);" onclick="removeRow(' +
    rowCount + ');">Delete</a></td></tr>';

  jQuery('#addedRows').append(recRow);
}

function removeRow(removeNum) {
  jQuery('#rowCount' + removeNum).remove();
}
</script>