I want to clone with default values clonenode()

Question

I want to do is to clone a row in a table. Here the code:

function addRow(){ 
    var x=document.getElementById("insertar").tBodies[0];  //get the table
    var node=x.rows[1].cloneNode(true);    //clone the previous node or row
    x.appendChild(node);   //add the node or row to the table
}

I just do not want to clone this section which, because when I add data to the first row, when you clone, data are also cloned. I pated the HTML code:

<table id='insertar'>
                <tr><td>Producto</td><td>Stock</td><td>Cantidad</td></tr>
                <?php 
                $numeroItems = 1;
                try{
                    $prod = array();
                    $param = array('TIPOP'=> 'Productos');
                    $ready = $client->MOSTRARPRODUCTOS($param)->MOSTRARPRODUCTOSRESULT;
                    array_push($prod,$ready->PRODUCTOS);
                }catch(Exception $e){
                    echo $e->getMessage();
                }
                echo "
                <tr><td>
                <select id='p' name='producto[]' onChange='document.getElementById(\"stock\").value = setStock()' >";
                echo "<option value='' >---------</option>";
                if(count($ready->PRODUCTOS)>1){
                    for($j = 0;$j < (count($ready->PRODUCTOS)); $j++){
                        if($ready->PRODUCTOS[$j]->GRUPO==$_GET['grupo']){
                            echo "<option value=".trim($ready->PRODUCTOS[$j]->CODIGOP)." >".trim($ready->PRODUCTOS[$j]->CODIGOP)."</option>";
                        }
                    }
                }
                echo "
                </select><br />
                </td>
                <td><input type='text' id='stock' value='' name='stock[]' readonly></input></td>
                <td><input type='text' name='cantidad[]' required></input></td></tr>";
                ?>
            </table>
            <a href="#" onclick="addRow()" >Agregar otro</a>

Now I want to change attributes td so that they are unique, how would you? Example of clones:

<tr><td>.....</td><td id="stock1" ...></td></tr>
<tr><td>.....</td><td id="stock2" ...></td></tr>
<tr><td>.....</td><td id="stock3" ...></td></tr>
Etc...

Answer 1

You should clone your default node right before it gets modified. Then reclone default as needed in your addRow.

var _default;
window.onload = function(){
  _default = document.getElementById('defaultNode').cloneNode(true);
}

like so:

function addRow(){ 
    var x=document.getElementById("insertar").tBodies[0];  //get the table
    x.appendChild(_default);   //add the node or row to the table
}

---

Your proposed working solution:

var _default;
window.onload = function() {
  var x = document.getElementById("insertar").tBodies[0];
  _default = x.rows[1].cloneNode(true);
}

Edit2:

var counter = 1;
function addRow(){ 
    var _cloned_default = _default.cloneNode(true);
    _cloned_default.id = "stock" + counter;
    counter++;
    x.appendChild(_cloned_default);   //add the node or row to the table
}

Simply get the td element in your cloned element:

Array.prototype.slice.call(_cloned_node.childNodes, 0).forEach(function(value){
    //making sure it's a node and nothing else
    if(value.nodeType === 1){
        //change id here
        value.id = counter;
        counter++;
  }
});