How to add new table row with all elements of previous row

Question

I am in trouble here. I have a table inside a form with some input elements in one row, Now I want to generate a new row on click a button with all the same elements as in the previous row. What I did I can get the elements but not the style and class attributes.

function addRow_P(tableID_P) {
        var table = document.getElementById(tableID_P);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        element1.class="i-checks"
        element1.style="position: absolute; opacity: 0;"
        cell1.appendChild(element1);
    
        var cell2 = row.insertCell(1);
        var array = ["Alaska","New York",];
        var element3 = document.createElement("select");
        //element3.type = "text";
        element3.name = "type[]";
        //element3.placeholder = "Item name or model";
        element3.id = "inputSuccess";
        element3.class = "span12 form-control"
        // elememt3.width = "220px"
        cell2.appendChild(element3);
    
        for (var i = 0; i < array.length; i++) {
          var option = document.createElement("option");
          option.value = array[i];
          option.text = array[i];
          element3.appendChild(option);
        }
    
    
        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "name[]";
        element2.placeholder = "Item name or model";
        element2.id = "inputSuccess";
        element2.class = "span12 form-control"
        cell3.appendChild(element2);
      }

<form role="form" data-toggle="validator">
                  <table class="table" id="product" style="margin-top: 10px" id="new-row" width="100%">
                      <tr>
                          <td>
                            <div class="form-group" style="margin-top:30px">
                            <input  class="i-checks"  style="position: absolute; opacity: 0;" type="checkbox">
                          </div>
                        </td>
                          <td width="600px">
                            <div class="form-group">
                              <label for="name">Product name</label>
                              <select class="select-product form-control"  style="width: 100%">
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                              </select>
                              <p class="help-block with-errors"></p>
                            </div>
                          </td>
                          <td width="200px">
                            <div class="form-group">
                              <label for="name">Quantity</label>
                              <input  class="form-control" type="text"  name="quantity" pattern="^[0-9].{1,}$" maxlength="10" data-error="Numbers only" required>
                              <p class="help-block with-errors"></p>
                            </div>
                          </td>
                          <td text-align="center">
                            <div class="form-group" style="margin-left:100px">
                              <label>New</label><br>
                              <button class="btn btn-primary btn-circle form-control" onclick="addRow_P('product')"><i class="fa fa-plus"></i>Add</button>
                            </div>
                          </td>
                         <!-- <td width="25%"> <input type="text" id="inputSuccess" name="serviceCharge[]"  placeholder="Enter service charge"> </td>-->
                      </tr>
                  </table>
    
    
                  <div class="col-lg-12">
                    <button class="btn btn-sm btn-primary m-t-n-xs" type="submit"><strong>Submit</strong></button>
                  </div>
                </form>

Here is a screenshot what I want achieve

Answer 1

cloneNode( true )

The Node.cloneNode() method returns a duplicate of the node on which this method was called.

deep Optional true if the children of the node should also be cloned, or false to clone only the specified node.

document.querySelector( "button" ).addEventListener( "click", () => {
  document.querySelector( "tbody" ).appendChild(
    document.querySelector( "tr" ).cloneNode( true )
  );
}, false );

<table>
  <tbody>
    <tr>
      <td>
        <input class="foo" type="number">
        <input class="bar" type="text">
        <input style="display:block;" type="range">
      </td>
      <td>
        <input class="foo" type="number">
        <input class="bar" type="text">
        <input style="display:block;" type="range">
      </td>
    </tr>
  </tbody>
</table>
<button>Clone row</button>

This method will clone the state of the HTML, but not the state of the values of any of the <input>s if changed from their defaults.
If this functionality (or any other) is also required, please comment below for a more detailed demo.

Updated to include jQuery and other functionality per discussion

In the below example, the cloned row is targeted by id, so the clone has its id removed with removeAttr( 'id' ) so the id is not repeated through the HTML.

$( 'button' ).click( function() {
  $( '#row_to_clone' ).clone().removeAttr( 'id' ).appendTo( 'tbody' );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="row_to_clone">
      <td>
        <input class="foo" type="number">
        <input class="bar" type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input class="baz" type="date">
        <input class="qux" type="email">
      </td>
    </tr>
  </tbody>
</table>
<button>Clone row</button>

Answer 2

use append() function of jQuery to do like this...

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $("#more"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
   
    var x = 0; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<label><input type="text" name="hello"/><button class="remove_field">&#10006;</button></label>'); //add input box
        }
    });
   
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        //e.preventDefault(); $(this).parent('div').remove(); x--;
		e.preventDefault(); $(this).closest('label').remove(); x--;
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST">
	<button class="add_field_button">Add More Member</button>
	<table id="more">
	  <input type="text" name="hello"/>
	</table>
	<input type="submit" value="Submit" name="submit" />
</form>