jQuery使用唯一的输入字段id动态添加行

Question

尝试添加动态行（最多6个）：但由于某种原因，它一次添加2行。所以这就是订单。默认情况下，显示1行，单击AddPO后，它会插入2行，按钮单击再次插入2行，然后是1，因为它检查最多6行。

为什么一次不插入一行？

以下是代码：

<script>
 $(document).ready(function(){
    $('#addPO').click(addPO)
});   

    var current = 1;
    function addPO() {
      current++;
        if (current < 7){
        var strToAdd = '<p><input id="FinalPONumber'+current+'" name="FinalPONumber'+current+'" size="20" /> <input id="FinalPOAmount'+current+'" name="FinalPOAmount'+current+'" size="20" /><input type="file" id="FinalPOFile'+current+'" name="FinalPOFile'+current+'"/></p>'

        $('#mainField').append(strToAdd)
        }
    }

 </script>


 html:



 <div id="mainField">
        <p>
      <input type="text" id="FinalPONumber1" name="FinalPONumber1" size="20" /> 
      <input type="text" id="FinalPOAmount1" name="FinalPOAmount1" size="20" />
      <input type="file" id="FinalPOFile1" name="FinalPOFile1"/>
        </p>
   </div>

   <p>
    <input type="button" id="addPO" value="Add Final PO">