JSFiddle - React, Tailwind, and code Playground

HTML

<div class="CSSTableGenerator" >
                <table id="mytable">
                    <thead>
                    <tr>
                        <th>
                            Champ 1
                        </th>
                        <th >
                            Champ 2
                        </th>
                        <th>
                            Champ 3
                        </th>
                    </tr>
                 </thead>
                 <tbody>
                    <tr>
                        <td >
                            Cell 11
                        </td>
                        <td>
                            Cell 12
                        </td>
                        <td>
                            Cell 13
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Cell 21
                        </td>
                        <td>
                            Cell 21
                        </td>
                        <td>
                            Cell 21
                        </td>
                    </tr>
                    
                    <tr>
                        <td >
                            Cell 31
                        </td>
                        <td>
                            Cell 32
                        </td>
                        <td>
                            Cell 33
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
<br/>
<br/>
<button onclick="newRow();"> Ajout Ligne</button> &nbsp; &nbsp; <label> (5 lignes max) </label>

CSS

.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child th:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child th:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child th:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
	background-color:#007fff;
		

}

.CSSTableGenerator th{
	vertical-align:middle;
	
	background-color:#cccccc;

	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:center;
	padding:7px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#000000;

}
.CSSTableGenerator td{
	vertical-align:middle;
	
	background-color:#ffffff;

	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:right;
	padding:7px;
	font-size:14px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px...

JavaScript

function addRow(table, data) {
    // suppression 1ère ligne
    if (nbrows == 5){
        $("tr:eq(1)").remove();
        nbrows = 4;
    }
    // ajout de la dernière ligne
	var lastRow = 				   $("<tr/>").appendTo(table.find('tbody:last'));
    nbrows += 1;
  	$.each(data, function(index, value) {
      	lastRow.append($("<td/>").text(value));
  	});   
 
}

function newRow(){
    var table = $("#mytable");
    addRow(table, lineArray[cptRow]);
    cptRow += 1;
    if (cptRow == 7) cptRow = 0;
}

var nbrows = 3; // à l'init
var cptRow = 0;

var lineArray = new Array();
lineArray[0] = ["4", "42", "43"]
lineArray[1] = ["5", "52", "53"];
lineArray[2] = ["6", "62", "63"];
lineArray[3] = ["7", "72", "73"];
lineArray[4] = ["8", "82", "83"];
lineArray[5] = ["9", "92", "93"];
lineArray[6] = ["10", "102", "103"];