How to clone a <tr> in a table with Javascript

Question

I want to duplicate the second <tr> everytime I click button add, as it shows in here, I mean I want to whenever I click on the button add a new <tr> will be added that do the same thing as the previous one.

<form id="frm1" action="Calculate.html">
<table id= "myTable">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </tr>
    <tr id= "rowToClone">
        <td>
            <select id= "products">
                <option value="80">Product-A</option>
                <option value="80">Product-B</option>
                <option value="80">Product-C</option>
                <option value="80">Product-D</option>
                <option value="16">Product-E</option>       
            </select>
        </td>
        <td><input type="number" id="ndc" placeholder=""></td>
        <td><p id="ndpc"></p></td>
        <td><p id="pu"></p></td>
        <td><p id="ptpp"></p></td>
    </tr>
</table>
<input type="button" onclick="Calculate()" value="calculate">
<input type="button" onclick="AddSelect()" value="Add">

I want it to do the same whole thing, I tried but never got successful the second part I am stuck to

first part:
        function Calculate() {
              var e = document.getElementById("products");
              var productValue = e.options[e.selectedIndex].value;
              document.getElementById("ndpc").innerHTML = productValue;
              document.getElementById("ndpc").value = productValue;
              if (e.selectedIndex === 0){
                document.getElementById("pu").value = 21.2; 
              }
              else if (e.selectedIndex === 1) {
                  document.getElementById("pu").value = 25.7;   
                }
                else if (e.selectedIndex === 2 || e.selectedIndex === 3 ) {
                  document.getElementById("pu").value = 14; 
                }               
                else {
                  document.getElementById("pu").value = 6;
                }
              var pu = document.getElementById("pu").value;
              document.getElementById("pu").innerHTML = pu;
              var ndc = document.getElementById("ndc").value;
              var ndpc = document.getElementById("ndpc").value;
              var Result = ndc * ndpc * pu;
              document.getElementById("ptpp").innerHTML = Result;
 };

the second part that I want to solve:

        function AddSelect(){
            var row = document.getElementbyId("rowToClone");  
            var table = document.getElementById("myTable");   
            var clone = row.cloneNode(true);                    
            clone.id = "New";                              
            function createRow() {
            //I don't know what to do.
 } };

I am new to Javascript obviously, please help me.

Answer 1

When using methods such as cloneNode(), or createElement() you'll need to append the new node to the DOM or it'll just float around aimlessly. Also, when cloning a node, keep in mind that if it and/or its children have any #ids, you'll end up having duplicated #ids which is super invalid. You should either change the #ids on all clones or do away with #ids on cloned nodes and use classes, tags, attributes, etc. instead.

In this demo, I replaced the form controls' #ids with name attribute since that's all you need to have in order to submit values from a <form> to a server (that and a <input type='submit'> button of course).

Demo

function addSelect() {
  var T = document.getElementById('xTable');

  var R = document.querySelectorAll('tbody .row')[0];

  var C = R.cloneNode(true);

  T.appendChild(C);

}

<form id="frm1" action="Calculate.html">
  <table id="xTable">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tr class="row">
      <td>
        <select name="products">
                <option value="80">Product-A</option>
                <option value="80">Product-B</option>
                <option value="80">Product-C</option>
                <option value="80">Product-D</option>
                <option value="16">Product-E</option>       
            </select>
      </td>
      <td><input type="number" name="ndc" placeholder=""></td>
      <td>
        <p id="ndpc"></p>
      </td>
      <td>
        <p id="pu"></p>
      </td>
      <td>
        <p id="ptpp"></p>
      </td>
    </tr>
  </table>


  <input type="button" onclick="addSelect()" value="Add">
</form>