JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="insert-more"> Add Five New Row </a>

    <br>
<table id="mytable">
    <thead class="sticky">
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
    </thead>
    <tbody>
        <tr>
           <td><input type="text" name="" value="" class="form-control" /></td>
		   <td><input type="number"  class="form-control" min="1" max="10000"></td>
			<td><input type="number"  class="form-control" min="1" max="100000"></td>
			<td><input type="number"  class="form-control" min="1" max="100000"></td>
			<td class="hidden-480"><input type="text" name="" value="" class="form-control" /></td>
			<td class="hidden-480"><input type="text" name="" value="" class="form-control" /></td>
        </tr>
                
                <tr>
           <td><input type="text" name="" value="" class="form-control" /></td>
		   <td><input type="number"  class="form-control" min="1" max="10000"></td>
			<td><input type="number"  class="form-control" min="1" max="100000"></td>
			<td><input type="number"  class="form-control" min="1" max="100000"></td>
			<td class="hidden-480"><input type="text" name="" value="" class="form-control" /></td>
			<td class="hidden-480"><input type="text" name="" value="" class="form-control" /></td>
        </tr>
                
               <tr>
           <td><input type="text" name="" value="" class="form-control" /></td>
		   <td><input type="number"  class="form-control" min="1" max="10000"></td>
			<td><input type="number"  class="form-control" min="1" max="100000"></td>
			<td><input type="number"  class="form-control" min="1" max="100000"></td>
			<td class="hidden-480"><input type="text" name="" value="" class="form-control" /></td>
			<td class="hidden-480"><input type="text" name="" value="" class="form-control" /></td>
        </tr>
                
                
               <tr>
           <td><input type="text" name="" value="" class="form-control" /></td>
		   <td><input...

CSS

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

JavaScript

$("#insert-more").click(function () {
     var rowCount = $('table tr').length -1;
     if(rowCount >= 100)
     {
        alert('you have 100 rows');
     }else{
     
         $("#mytable").each(function () {
             var tds = '<tr>';
             jQuery.each($('tr:last td', this), function () {
                 tds += '<td>' + $(this).html() + '</td>';
             });
             tds += '</tr>';
             if ($('tbody', this).length > 0) {
                 $('tbody', this).append(tds);
                 $('tbody', this).append(tds);
                 $('tbody', this).append(tds);
                 $('tbody', this).append(tds);
                 $('tbody', this).append(tds);
             } else {
                 $(this).append(tds);
             }
         });
     }  
});