html - incremental value of single text box on javascript dynamic table -


i have dynamically created table 4 text inputs , 1 drop down selection. when user clicks add button, clone of previous row added table. works should. i'm trying increase unit id input 1. example first row 1111t-01 when add button clicked want next row unit id 1111t-02. thank you.

html code

<h2>please fill in information below</h2>         <form action="pmunitcreate.php" method="post">             <p>click add button add new row. click delete button delete rows.</p>              <input type="button" id="btnadd" class="button-add" onclick="addrow('mytable')" value="add"/>              <input type="button" id="btndelete" class="button-delete" onclick="deleterow('mytable')" value="delete"/>                <br>              <table id="mytable" class="form">                   <tr id="heading">                 <th><b><font size="4">job number</font></b></th>                 <th><b><font size="4">job code</font></b></th>                 <th><b><font size="4">unit id</font></b></th>                 <th><b><font size="4">model number</font></b></th>                 <th><b><font size="4">scope</font></b></th>                 </tr>                     <tr id="tablerow">                     <td>                         <input type="text" name="jobnumber[]" required>                     </td>                      <td>                         <input type="text" name="jobcode[]" required>                     </td>                      <td>                         <input type="text" name="unitid[]" required>                     </td>                      <td>                         <input type="text" name="modelnumber[]" required>                     </td>                      <td>                         <select id="scope" name="scope[]" required>                             <option>100oa</option>                             <option>btank</option>                             <option>wsecon</option>                             <option>netpkg</option>                             <option>cstmctrl</option>                             <option>cstmref</option>                             <option>cstmsm</option>                             <option>cstmhv</option>                             <option>cpctrl</option>                             <option>desihw</option>                             <option>digscroll</option>                             <option>dfgas</option>                             <option>dwall</option>                             <option>mz-dd</option>                             <option>dpp</option>                             <option>encl</option>                             <option>platehx</option>                             <option>erw</option>                             <option>erwmodule</option>                             <option>ervmod</option>                             <option>evapbp</option>                             <option>preevap</option>                             <option>xp</option>                             <option>extend</option>                             <option>fanwall</option>                             <option>fillstat</option>                             <option>ffilt</option>                             <option>pfilt</option>                             <option>carbfilt</option>                             <option>custfilt</option>                             <option>mgh(h)</option>                             <option>gheat</option>                             <option>highstatic</option>                             <option>hgbp</option>                             <option>hgrh</option>                             <option>hpconv</option>                             <option>gfhumid</option>                             <option>tohumid</option>                         </select>                     </td>                  </tr>               </table> 

js code

            <script>                  function addrow() {                     var row = document.getelementbyid("tablerow"); // find row copy                     var table = document.getelementbyid("mytable"); // find table append                     var clone = row.clonenode(true); // copy children                     //clone.id = "newid"; // change id or other attributes/contents                     table.appendchild(clone); // add new row end of table                 }                  function deleterow() {                     document.getelementbyid("mytable").deleterow(-1);                      }              </script> 

jsfiddle

if unit id xxxx-1 , x never - should work.

if x can - let me know , i'll update answer accordingly.

function incrementunitid(unitid) {    var arr = unitid.split('-');    if (arr.length === 1) {return;} // unit id not valid;    var number = parseint(arr[1]) + 1;    return arr[0] + '-' + (number < 10 ? 0 : '') + number;  }    function addrow() {                    var row = document.getelementbyid("tablerow"); // find row copy    var table = document.getelementbyid("mytable"); // find table append    var clone = row.clonenode(true); // copy children    row.id = "oldrow"; // want take last value inserted    clone.cells[2].childnodes[1].value = incrementunitid(clone.cells[2].childnodes[1].value)    table.appendchild(clone); // add new row end of table  }      function deleterow() {    document.getelementbyid("mytable").deleterow(-1);  }
<h2>please fill in information below</h2>          <form action="pmunitcreate.php" method="post">              <p>click add button add new row. click delete button delete rows.</p>                <input type="button" id="btnadd" class="button-add" onclick="addrow('mytable')" value="add"/>               <input type="button" id="btndelete" class="button-delete" onclick="deleterow('mytable')" value="delete"/>                    <br>                <table id="mytable" class="form">                     <tr id="heading">                  <th><b><font size="4">job number</font></b></th>                  <th><b><font size="4">job code</font></b></th>                  <th><b><font size="4">unit id</font></b></th>                  <th><b><font size="4">model number</font></b></th>                  <th><b><font size="4">scope</font></b></th>                  </tr>                       <tr id="tablerow">                      <td>                          <input type="text" name="jobnumber[]" required>                      </td>                        <td>                          <input type="text" name="jobcode[]" required>                      </td>                        <td>                          <input type="text" name="unitid[]" required>                      </td>                        <td>                          <input type="text" name="modelnumber[]" required>                      </td>                        <td>                          <select id="scope" name="scope[]" required>                              <option>100oa</option>                              <option>btank</option>                              <option>wsecon</option>                              <option>netpkg</option>                              <option>cstmctrl</option>                              <option>cstmref</option>                              <option>cstmsm</option>                              <option>cstmhv</option>                              <option>cpctrl</option>                              <option>desihw</option>                              <option>digscroll</option>                              <option>dfgas</option>                              <option>dwall</option>                              <option>mz-dd</option>                              <option>dpp</option>                              <option>encl</option>                              <option>platehx</option>                              <option>erw</option>                              <option>erwmodule</option>                              <option>ervmod</option>                              <option>evapbp</option>                              <option>preevap</option>                              <option>xp</option>                              <option>extend</option>                              <option>fanwall</option>                              <option>fillstat</option>                              <option>ffilt</option>                              <option>pfilt</option>                              <option>carbfilt</option>                              <option>custfilt</option>                              <option>mgh(h)</option>                              <option>gheat</option>                              <option>highstatic</option>                              <option>hgbp</option>                              <option>hgrh</option>                              <option>hpconv</option>                              <option>gfhumid</option>                              <option>tohumid</option>                          </select>                      </td>                    </tr>      </table>                  


Comments