// JavaScript Document


     function serviceAddRow()
     {
          // grab the element, i.e. the table your editing, in this we're calling it 
          // 'mySampleTable' and it is reffered to in the table further down on the page 
          // with a unique of id of you guessed it, 'mySampleTable'
          var tbl = document.getElementById('ServiceTable');
          // grab how many rows are in the table
          var lastRow = tbl.rows.length;

          // if there's no header row in the table (there should be, code at least one 
          //manually!), then iteration = lastRow + 1
          var iteration = lastRow;
          // creates a new row
          var row = tbl.insertRow(lastRow);

          // left cell
          // insert a cell
          var cellLeft = row.insertCell(0);
          // here we're just using numbering the cell, like anything else you don't
          // have to use this, but i've kinda noticed users tend to like them
          var el = document.createElement('input');
          // a data type of text
          el.type = 'text';
          // the name of the element txtRow, and because this is dynamic we also
          // append the row number to it, so for example if this is the eigth row
          // being created the text box will have the name of txtRow8. super fantastic.
          el.name = 'form_service_machine[]';
          // the exact same thing with a unique id
          el.id = 'form_service_machine[]';
          // set it to size of 40. setting sizes is good.
          //el.size = 40;

          // same thing as earlier, append our element to our freshly and clean cell
          cellLeft.appendChild(el);


          // right cell
          // another cell!
          var cellRight = row.insertCell(1);
          // creating an element this time, specifically an input
          var position = document.createElement('input');
          // a data type of text
          position.type = 'text';
          // the name of the element txtRow, and because this is dynamic we also
          // append the row number to it, so for example if this is the eigth row
          // being created the text box will have the name of txtRow8. super fantastic.
           position.name = 'form_service_machine_serial[]';
          // the exact same thing with a unique id
          position.id = 'form_service_machine_serial[]';
          // set it to size of 40. setting sizes is good.
          //position.size = 40;

          // same thing as earlier, append our element to our freshly and clean cell
          cellRight.appendChild(position);
		            // right cell
          // another cell!
          var cellRight = row.insertCell(2);
          // creating an element this time, specifically an input
          var email = document.createElement('textarea');
          // the name of the element txtRow, and because this is dynamic we also
          // append the row number to it, so for example if this is the eigth row
          // being created the text box will have the name of txtRow8. super fantastic.
           email.name = 'form_service_machine_problem[]';
          // the exact same thing with a unique id
          email.id = 'form_service_machine_problem[]';
          // set it to size of 40. setting sizes is good.
          //email.size = 40;

          // same thing as earlier, append our element to our freshly and clean cell
          cellRight.appendChild(email);



     }

     function serviceRemoveRow()
     {
          // grab the element again!
          var tbl = document.getElementById('ServiceTable');
          // grab the length!
          var lastRow = tbl.rows.length;
          // delete the last row if there is more than one row!
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
     }