javascript - How to change name of input text, when adding more inputs -

this form

<form action=""  method="post">   <input type="button" value="addmore" onclick="addrow('datatable')" />   <table id="datatable" class="tftable" border="1">     <tr>       <td><label>should auto increment(like (name1, name2, name3 ...))</label>         <input type="text" required="required" name="doninid[]" value=""></td>     </tr>   </table>   <input class="submit" type="submit" value="confirm &raquo;" /> </form> 

this script add more => script.js:

function addrow(tableid) {     var table = document.getelementbyid(tableid);     var rowcount = table.rows.length;     if(rowcount < 20){                          // limit user creating fields more limits         var row = table.insertrow(rowcount);         var colcount = table.rows[0].cells.length;         for(var i=0; i<colcount; i++) {             var newcell = row.insertcell(i);             newcell.innerhtml = table.rows[0].cells[i].innerhtml;         }     }else{          alert("maximum passenger per ticket 20.");      } }  function deleterow(tableid) {     var table = document.getelementbyid(tableid);     var rowcount = table.rows.length;     for(var i=0; i<rowcount; i++) {         var row = table.rows[i];         var chkbox = row.cells[0].childnodes[0];         if(null != chkbox && true == chkbox.checked) {             if(rowcount <= 1) {                         // limit user removing fields                 alert("cannot remove passenger.");                 break;             }             table.deleterow(i);             rowcount--;             i--;         }     } } 

now idia how change label name add more input box it's should auto increment like:

name1, name2, name3, name3 , when add should show us.

thanks in advance.

add variable tracks next # use , append contents , name every time add one.

html

<form action="" method="post"> <input type="button" value="addmore" onclick="addrow('datatable')" /> <table id="datatable" class="tftable" border="1">     <tr>         <td>             <label>name 1:</label>             <input type="text" required="required" name="name1" />         </td>     </tr> </table> <input class="submit" type="submit" value="confirm &raquo;" /> 

javascript

var nextname = 2;  function addrow(tableid) {     var table = document.getelementbyid(tableid);     var rowcount = table.rows.length;     if (rowcount < 20) { // limit user creating fields more limits         var row = table.insertrow(rowcount);         var colcount = table.rows[0].cells.length;         (var = 0; < colcount; i++) {             var newcell = row.insertcell(i);             newcell.innerhtml = '<label>name ' + nextname + ':</label>' +                 '<input type="text" required="required" name="name' + nextname + '" />';             nextname++;         }     } else {         alert("maximum passenger per ticket 20.");      } }  function deleterow(tableid) {     var table = document.getelementbyid(tableid);     var rowcount = table.rows.length;     (var = 0; < rowcount; i++) {         var row = table.rows[i];         var chkbox = row.cells[0].childnodes[0];         if (null != chkbox && true == chkbox.checked) {             if (rowcount <= 1) { // limit user removing fields                 alert("cannot remove passenger.");                 break;             }             table.deleterow(i);             rowcount--;             i--;         }     } } 

demo: http://jsfiddle.net/benjaminray/4jnw0t09/