JSFiddle - React, Tailwind, and code Playground

by desytec

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="row">
    <div class="row ml-4">
        <button id="btnAdd" type="button" class="btn btn-secondary btn-circle m-4">Add row</button>    
    </div>
    <div class="col-6">
        <button id="btnDelete" type="button" class="btn btn-secondary btn-circle m-4">Delete row</button>    
    </div>    
</div>

<table id="mytable" class="table table-striped dt-responsive w-100 table-bordered display nowrap table-hover mb-0">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

CSS

.table-scroll tbody {
    position: absolute;
    overflow-y: auto;
    height: 250px;
}

JavaScript

var count = 0;

$(document).ready(function () {
    $('#btnAdd').on('click', function() {
      var tableBody = $('#mytable tbody');
      var newRow =
         '<tr id="tr_' + count + '">' +
             '<td>Test Row ' + count + ' Col 1</td> ' +
             '<td>Test Row ' + count + ' Col 2</td>'
         '</tr>';
         tableBody.append(newRow);
         count++;
         if (count == 3)
             tableBody.addClass('table-scroll');
    });
    $('#btnDelete').on('click', function() {
      var tableBody = $('#mytable tbody');
         tableBody.children().last().remove();
         count--;
         if (count == 2)
             tableBody.removeClass('table-scroll');
    });
});