Increment index of a Javascript function's argument name dynamically
<p>In this code javascript function is taking from[1] as argument in displayDatePicker('from[1]', false, 'dmy', '-'). When I clone this (second) row using jquery, all my input and select names get incremented but javascript function is still taking from[1] as argument. I want to ask how to change this from[1] to from[2] and so on</p>

<pre><code>&lt;tr&gt;
         &lt;td width="19%" align="right" &gt;&lt;input type="text" id="roomcat" name="roomcat[1]" value="Deluxe" /&gt;&lt;/td&gt;
         &lt;td width="1%" align="center" &gt;&amp;nbsp;&lt;/td&gt;
         &lt;td width="15%" align="left" &gt;&lt;select class="f" name="roomtype[1]" id="roomtype"&gt;
            &lt;option value=""&gt;Please Select&lt;/option&gt;
            &lt;option value="Single"&gt;Single&lt;/option&gt;
            &lt;option value="Double"&gt;Double&lt;/option&gt;
            &lt;option value="Triple"&gt;Triple&lt;/option&gt;
            &lt;option value="Extra"&gt;Extra&lt;/option&gt;
         &lt;/select&gt;&lt;/td&gt;
         &lt;td width="7%" align="left" &gt;&lt;input type="text" id="cfit" name="cfit[1]" /&gt;&lt;/td&gt;
         &lt;td width="8%" align="left" &gt;&lt;input type="text" id="cgit" name="cgit[1]" /&gt;&lt;/td&gt;
         &lt;td width="7%" align="center" &gt;&lt;input type="text" id="rfit" name="rfit[1]" /&gt;&lt;/td&gt;
         &lt;td width="8%" align="center" &gt;&lt;input type="text" id="rgit" name="rgit[1]" /&gt;&lt;/td&gt;
         &lt;td width="10%" align="center" &gt;
            &lt;input class="f" style="width:70px" type="text" size="12" name="from[1]" id="from" value="&lt;?php if($mode==1)
            {
            echo $from;
            }
            else
            {
            echo "From";
            }?&gt;" readonly="readonly"  /&gt;
            &lt;a href="javascript:displayDatePicker('from[1]', false, 'dmy', '-')"&gt;&lt;i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16" /&gt;&lt;/a&gt;
         &lt;/td&gt;
         &lt;td width="10%" align="center" &gt;
            &lt;input style="width:70px" class="f" type="text" size="12" name="to[1]" id="to" value="&lt;?php if($mode==1)
              {
              echo $to;
              }
              else
              {
              echo "To";
              }?&gt;" readonly="readonly" /&gt;
              &lt;a href="javascript:displayDatePicker('to[1]', false, 'dmy', '-')"&gt;&lt;i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16"  /&gt;&lt;/a&gt;
         &lt;/td&gt;
         &lt;td width="15%" align="left" &gt;&amp;nbsp;&lt;/td&gt;
       &lt;/tr&gt;
</code></pre>

<p>Jquery Code is</p>

<pre><code>    $(document).ready(function() {
    $("#addrow").click(function() {
      var row = $('#table2 tbody&gt;tr:last').clone(true);
        row.find("input:text").each(function(){
    this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
            return '[' + (parseInt(p1,10)+1) + ']';
        });
        })
    row.find("select").each(function(){
    this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
            return '[' + (parseInt(p1,10)+1) + ']';
        });
        })
      row.insertAfter('#table2 tbody&gt;tr:last');
      return false;
    });
  });   
</code></pre>
