JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tbConfigGrille">
        <tbody>
            <tr>
                <th colspan="4" class="pCentre">Les niveaux d’évaluation</th>
            </tr>
                                    <tr>
                            <td><input type="checkbox" name="niv1" value="1" onclick="ajouterSupprimer(this)" id="1" /><label for="1">A Aucune maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv2" value="2" onclick="ajouterSupprimer(this)" id="2" checked='checked'/><label for="2">I Maîtrise Insuffisante</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv3" value="3" onclick="ajouterSupprimer(this)" id="3" checked='checked'/><label for="3">F Maîtrise fragile</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv4" value="4" onclick="ajouterSupprimer(this)" id="4" checked='checked'/><label for="4">S Maîtrise satisfaisante</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv5" value="5" onclick="ajouterSupprimer(this)" id="5" /><label for="5">B Bonne Maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv6" value="6" onclick="ajouterSupprimer(this)" id="6" checked='checked'/><label for="6">TB Très Bonne maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv7" value="7" onclick="ajouterSupprimer(this)" id="7" /><label for="7">E Excellente maîtrise</label></td>
                        </tr>
                                           ...

CSS

.gE {
  margin: auto;
  color: rgb(0, 0, 0);
  border-collapse: collapse;
  border: 3px solid black;
  text-align: left;
}
.gE tr,
.gE td {
  border: 3px solid black;
}
.gE th {
  background-color: rgb(192, 192, 192);
  text-align: center;
  border-left: 3px solid black;
}
.basE {
  border-bottom: 3px solid black;
}
.basF {
  border-bottom: 1px solid black;
}
.fr {
  background-color: rgb(255, 159, 159);
}
.fble {
  background-color: rgb(187, 255, 255);
}
.fbla {
  background-color: rgb(255, 255, 255);
}
input[type="radio"] {
  width: 25px;
  height: 25px;
}

JavaScript

function supprimer() {
			let celluleTh = document.querySelectorAll(
				"th[data-ordre='" + event.target.value + "']"
			);
			celluleTh[0].remove();

			lignesTab = document.getElementById('table').getElementsByTagName("tr");
			let celluleTd = document.querySelectorAll(
				"td[data-ordre='" + event.target.value + "']"
			);
			for (let i = 0, l = lignesTab.length; i < l; i++) {
				celluleTd[i].remove();
			}
		}

		function ajouter() {
			let table = document.getElementById('table'),
				row = table.rows[1],
				text = event.target.nextSibling.innerText.split(" ")[0],
				arr;

			document.querySelectorAll('[type="checkbox"]:checked')
				.forEach((checkbox) => {
				let th = document.createElement("th");
				th.textContent = text;
				th.dataset.ordre = event.target.value;
				if (row.querySelectorAll("th[data-ordre='" + event.target.value + "']").length == 0)
					row.appendChild(th);
				arr = [...row.querySelectorAll("th[data-ordre]")];
				});
			row.querySelectorAll("th[data-ordre]")
				.forEach((th) => {
				th.remove();
				});
			arr
				.sort((a, b) => {
				return a.dataset.ordre < b.dataset.ordre ? -1 : 1;
				})
				.forEach((cell) => {
				if (document.querySelectorAll("th[data-ordre='" + cell.dataset.ordre + "']").length == 0)
					row.appendChild(cell);
				});

			ajouterLigneInf();
		}

		function ajouterLigneInf() {
			let table = document.getElementById('table'),
				lignesTab = document.getElementById('table').getElementsByTagName("tr");
			// alert(lignesTab.length);
			for (let i = 2, l = lignesTab.length; i < l; i++) {
				// alert(i);
				let row = table.rows[i], arr;

				document.querySelectorAll('[type="checkbox"]:checked')
				.forEach((checkbox) => {
					let td = document.createElement("td");
					td.textContent = "a";
					td.dataset.ordre = event.target.value;
					if (row.querySelectorAll("td[data-ordre='" + event.target.value + "']").length == 0)
					row.appendChild(td);
					arr =...