I'm new in jquery and I found on google that I can do what I want using .clone...
But, it works but not completely. Here I have a row which I need to clone when user click on the add button :
<table id="tableTest">
<tr id="row_element_1" name="row_element">
  <td><span id="labelNumber_1" name="labelNumber_1">1</span></td>
  <td>
    <select id="supplier_1" name="comboA_1" onchange="classTest.loadComboB(this.value, 'ComboB_1')" class="select"></select>
  </td>
  <td>
    <select name="ComboB_1" id="ComboB_1" onchange="classTest.loadComboC(this.value, document.getElementById('comboA_1').value, 'ComboC_1')" class="select"></select>
  </td>
  <td>
    <select name="ComboC_1" id="ComboC_1" onchange="classTest.loadInputA(this.value, 'inputA_1')" class="select"></select>
  </td>
  <td>
    <input type="text" name="inputA_1" id="inputA_1" />
  </td>
  <td>
    <input type="number" min="0" name="inputB_1" id="inputB_1" required="1" value="0" onchange="classTest.calculateTotal('inputA_1', this.value, inputC_1)" />
  </td>
  <td>
    <input type="text" name="inputC_1" id="inputC_1" readonly="readonly" />
  </td>
  <td>
    <button id="remove_btn_1" name="remove_product_btn_1" onclick="classTest.removeElement()">Remove</button>
  </td>
  <td>
    <button id="add_btn_1" name="add_product_btn_1" onclick="classTest.addElement(this)">Add</button>
  </td>
</tr>
</table>
I'm able to clone it using this but my problem is that the event (like the "onchange" are not changed with the new dynamic value...
var classTest = {
loadComboB : function (_idComboA_Selected, comboB) {
    $.ajax({
        method: 'POST',
        url: 'phpfilewithquery.php',
        data: {
                moduleId: 'test',
                itemId: _idComboA_Selected,
                action: 'loabCb_B',
            },
        reader: {
            type: 'json',
            root: 'items'
        },
        success: function (json_res) {
            //console.log(json_res);
            var items = jQuery.parseJSON( json_res );
            comboBox.replaceOption(comboB, items.items);    // custom function which load the combobox "comboB" with items.items
        }
    });
},
loadComboC : function (_idComboB_Selected, _idComboA_Selected, comboC) {
    $.ajax({
        method: 'POST',
        url: 'phpfilewithquery.php',
        data: {
                moduleId: 'test',
                gammeId: _idComboB_Selected,
                supplierId : _idComboA_Selected,
                action: 'loadCb_C',
            },
        reader: {
            type: 'json',
            root: 'items'
        },
        success: function (json_res) {
            var items = jQuery.parseJSON( json_res );
            comboBox.replaceOption(comboC, items.items);
        }
    });
},
loadInputA : function (_idComboC_Selected, inputA_val) {
    $.ajax({
        method: 'POST',
        url: 'phpfilewithquery.php',
        data: {
                moduleId: 'test',
                productId : _idComboC_Selected,
                action: 'loadInp_A',
            },
        reader: {
            type: 'json',
            root: 'items'
        },
        success: function (json_res) {
            var res = jQuery.parseJSON( json_res );
            $('#' + inputA_1).val( res.price );
            // this.calculateTotal();
        }
    });
},
calculateTotal: function (inputA, inputB, inputC){
    var price = $('#' + inputA).val();
    var qty = $('#' + inputB).val();
    var tmp = price * qty;
    var total = tmp.toFixed(2);
    $('#' + inputC).val(total + ' $');
},
removeProduct: function (elm){
},
addProduct: function (elm){
    console.log(elm.parentNode.parentNode);
    var rowToClone = $(elm.parentNode.parentNode).clone(true, true);
    //var newRow = document.getElementById('tableProduct').appendChild(rowToClone);
    var attrLabel = rowToClone.find('span').attr('name');
    var temp = attrLabel.split("_"); 
    var number = parseInt(temp[temp.length-1]);     
    var newNumber = number+1;
    rowToClone.find('input').each(function() {
        if(this.name) {
            this.name= this.name.replace('_' + number , '_' + newNumber );
            this.id= this.id.replace('_' + number , '_' + newNumber );
        }
    });
    rowToClone.find('span').each(function() {
        if(this.name){
            this.name= this.name.replace('_' + number , '_' + newNumber );
            this.id= this.id.replace('_' + number , '_' + newNumber );
            this.html(number);
        }
    });
    rowToClone.find('select').each(function() {
        if(this.name) {
            this.name= this.name.replace('_' + number , '_' + newNumber );
            this.id= this.id.replace('_' + number , '_' + newNumber );
            $( '#' + this.id.replace('_' + number , '_' + newNumber ) ).empty();
        }
    });
    rowToClone.find('button').each(function() {
        if(this.name){
            this.name= this.name.replace('_' + number , '_' + newNumber );
            this.id= this.id.replace('_' + number , '_' + newNumber );
        }
    });
    $("#tableTest").append(rowToClone);
}
};
So, I can I clone a row and changing the dynamic element in the event?
Also, I need to call "calculateTotal" on success in the "loadInputA" function. Do I need to pass all the arguments to the "loadInputA" ?
