How to add dynamically a row to a table in the ejs using jquery?

I have a table that i am rendering in the ejs template. Now in the template, i have a bootstrap nav tabs. In each tab there is a table which is being rendered in the ejs. Now there is Add button in the table head and if i click it, it will simply add a new row to the table. My template code for the tab content is:

<div class="tab-content tab-content-bordered">

 <%for(var i=0; i<entityName.length;i++){%>
   <% if(entityName[i].entityType === "clientUpload"){ %>
    <div class="tab-pane attr-detail-<%= entityName[i].displayName%> fade <% if (i === 0) { %>in active<% } %>" id="<%=entityName[i].displayName%>">
        <table class="table">
            <thead>
            <tr>
                <th>Attribute Name</th>
                <th>Display Name</th>
                <th>Description</th>
                <th>Is Required?</th>
                <th>Allow Nulls?</th>
                <th>Data Type</th>
                <th>Length</th>
                <th>Precision</th>
                <th>Scale</th>
                <th><Button class="bt-add-row btn btn-primary">Add</Button></th>
            </tr>
            </thead>
            <tbody>
            <% for(var j=0; j<entityName[i].attributes.length;j++){%>
              <tr class="attr-row">

                  <td>
                  <div class="form-group no-margin">
                      <input class="form-control input-attr-name" type="text" name="attrName" size="8" placeholder="Attribute Name" value="<%= entityName[i].attributes[j].name %>" />
                  </div>
                  </td>

                  <td>
                      <div class="form-group no-margin">
                          <input class="form-control input-disp-name" type="text" name="dispName" size="8" placeholder="Display Name" value="<%= entityName[i].attributes[j].displayName %>" />
                      </div>
                  </td>

                  <td>
                      <div class="form-group no-margin">
                          <textarea class="form-control input-description expand" rows="1" cols="15" name="description" placeholder="Description" style="resize:none;overflow:hidden" onfocus="this.rows=3;this.style.overflow='auto'" onfocusout="this.rows=1;this.style.overflow='hidden';"><%= entityName[i].attributes[j].description %></textarea>
                      </div>
                  </td>


                  <td>
                      <div class="form-group no-margin">
                          <div class="form-control checkbox valign-middle no-border" style="display:table-cell">
                              <label class="px-single">
                                  <input type="checkbox" class="input-is-required px" <% if(entityName[i].attributes[j].isRequired){%> checked <%}%>/>
                                  <span class="lbl"></span>
                              </label>
                          </div>
                      </div>
                  </td>


                  <td>
                      <div class="form-group no-margin">
                          <div class="form-control checkbox valign-middle no-border" style="display:table-cell">
                              <label class="px-single">
                                  <input type="checkbox" class="input-allow-null px"<% if (entityName[i].attributes[j].isRequired) { %>disabled<% } %> <% if (entityName[i].attributes[j].isNullable) { %>checked<% } %> />
                                  <span class="lbl"></span>
                              </label>
                          </div>
                      </div>
                  </td>

                  <td>
                      <div class="form-group no-margin">
                          <select class="selectpicker form-control select-attr-type" data-width="auto" data-container="#main-content">
                              <% dataTypeList.each(function(dataType, index) { %>
                              <option value="<%= dataType.name %>" <% if (dataType.name.toLowerCase() === entityName[i].attributes[j].attributeType) { %>selected="selected"<% } %>><%= dataType.name %></option>
                              <% }); %>
                          </select>
                      </div>
                  </td>

              <td>

                      <div class="form-group no-margin" style="display: <% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "text") {%>none<%}%> ">
                          <input type="text" name="length" size="5" placeholder="Length" value="<%=entityName[i].attributes.length === undefined ? settings.DEFAULT_TEXT_LENGTH : entityName[i].attributes.length %>"  class="form-control input-length"  />
                      </div>

               </td>

                  <td>

                      <div class="form-group no-margin" style="display:<% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "decimal") {%>none<%}%>">
                          <input type="text" name="precision" size="1" placeholder="Precision" value="<%= entityName[i].attributes[j].precision === undefined ? settings.DEFAULT_DECIMAL_PRECISION : entityName[i].attributes[j].precision %>"  class="form-control input-precision"/>
                      </div>

                  </td>

                  <td>

                      <div class="form-group no-margin" style="display:<% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "decimal") {%>none<%}%>">
                          <input type="text" name="scale" size="1" placeholder="Scale" value="<%= entityName[i].attributes[j].scale === undefined ? settings.DEFAULT_DECIMAL_SCALE : entityName[i].attributes[j].scale %>"  class="form-control input-scale" />
                      </div>

                  </td>

                  <td>
                      <div class="form-group no-margin">
                          <Button class="bt-remove-row btn">Remove</Button>
                      </div>
                  </td>
              </tr>
            <%}%>
            </tbody>
        </table>
    </div>
    <%}%>
    <%}%>
</div>

Here i just want to add a row to the table. But this time the default values will be there in the row and user will edit it.

How can i add a row using jquery without writing the all <td>s in the <tr> in the append method?? Is there any simple way to just copy a row and use default value and add after the last row in the table??

I have used canJs. It's very much easy using canJs. At first i seperated out the row part in another ejs and then store it in a variable by below code:

 var rowItem = can.view.render("templates/attr-tab-row.ejs",{});

And then added with the table body.

var table_body = $(el).closest('div').find('tbody');
table_body.append(rowItem);