How to add new row in table using javascript

// Html Code

<p>
    <button type="button" id="addRow">Add another row</button>
</p>

<table class="table" id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Country</th>
            <th>Statistics</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td >1</td>
            <td class="name">Name #1</td>
            <td>United States of America</td>
            <td>100%</td>
        </tr>
        <tr id="2">
            <td >2</td>
            <td class="name">Name #2</td>
            <td>United States of America</td>
            <td>100%</td>
        </tr>
    </tbody>
</table>


// Javascripts

var table = $('#myTable');

$('#addRow').click(addRow);

var id = 3;
function addRow() {
    var cell = '<td>' + id + '</td>';
        cell += '<td class="name">Name #' + id + '</td>';
        cell += '<td>United States of America</td>';
        cell += '<td>100%</td>';
       
   table.append('<tr id="' + id +'">' + cell + '</tr>');
   id++;
}

// BS Tooltip
var tooltipOptions = {
    container: 'body',
    html: true,
    selector: 'td.name',
    trigger: 'manual',
    title: function() {
        // here will be custom template
        var id = $(this).parent().attr('id');
 
        return 'Tooltip for row #' + id;
    }
};

table.tooltip(tooltipOptions);


table
.on('mouseenter focusin', 'tbody > tr', function() {
    $(this).find('td.name').tooltip('show');
})
.on('mouseleave focusout', 'tbody > tr', function() {
    $(this).find('td.name').tooltip('hide');
});


// Css
body {
    padding: 15px;
}