点击添加自动数字增量1,2,3 -----

Question

HTML：

<table>
    <tr>
    <th><b>ADD</b></th>
    <tr><td class = "tdCustom" ><apex:commandButton value="Add" action="{!addBatch}" id="update"    </td></tr>
    <td class = "tdCustom" style="width:100px;">          
    <apex:repeat value="{!batchMap[qliRow]}" var="child" id="therepeat2">
    <table class="table-data" border = "1">
    <apex:variable value="{!1}" var="batchrowNum"/>
    <tr id="tr_clone">                                     
    <td> <apex:input value="0" id="counter"/></td>
    <td>
    <apex:commandButton value="Delete" action="{!deleteBatch}" />
    </td></tr>
    <apex:variable var="batchrowNum" value="{!batchrowNum+ 1}"/>
    </table>
    </apex:repeat>
    </td>
    </tr>
    <apex:variable var="rowNum" value="{!rowNum + 1}"/> 
    </apex:repeat> 
    </apex:repeat> 
    </table>  

示例脚本：我试过

<script>
var val;
$("#update").click(function()
{
   val = $('#counter').val();
   val++;
   $('#counter').prop('value',val )
});
</script>    

我有一个表“主表”和“子表”（维护中的表），点击action="{!addBatch}"它在子表上添加行。

如果我在主表中有三个项目，我可以看到三个添加按钮。无论我点击什么添加按钮，它都必须在<apex:input value="0" id="counter"/>中增加一个数字

同样，当我删除中间的一些子行时，它必须重新排列数字<apex:input value="0" id="counter"/>