javascript - jQueryは一意の入力フィールドIDで行を動的に追加します

Question

動的行を追加しようとしています (最大 6 つまで): しかし、何らかの理由で一度に 2 行追加されます。というわけで順番です。デフォルトでは 1 行が表示されます。AddPO をクリックすると 2 行が挿入され、ボタンのクリックで再び 2 行が挿入され、最大 6 行をチェックするためもちろん 1 行が挿入されます。

一度に 1 行ずつ挿入しないのはなぜですか?

コードは次のとおりです。

<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">