JSFiddle - React, Tailwind, and code Playground

HTML

<body>

Remplir le formulaire pour valider votre commande    
    
<form action="inscription.php" method="post">
   <fieldset class="coordonnees">
      <legend>Vos Coordonnées</legend>
      <label for="nom">Nom</label>
      <input id="nom" name="nom" pattern="[a-Z]{*}" type="text" si>
      <br>
      <label for="prenom">Prénom</label>
      <input id="prenom" name="prenom" type="text">
      <br>
      <label for="mail">mail</label>
      <input id="mail" name="mail" type="text">
      <br>
      <label for="mail_conf">Confirmer mail</label>
      <input id="mail_conf" name="Confirmer mail" type="text">
      <br>
      <legend>Adresse</legend>
      <label>Rue</label>
      <input id="rue" name="rue" type="text">
      <br>
      <label>Code postal</label>
      <input id="code-postal" name="code-postal" type="text"><br>
      <label>Ville</label>
      <input id="ville" name="ville" type="text"><br>
    </fieldset>      
    <fieldset class="Votre commande">
    <legend>Votre commande</legend>
 
 
    <title> Tableau de commande </title>
 
 
<table border="1" id="TableID" style="width: 350pxpx;">
<tr>
 
<th bgcolor="grey" td="" width="15"></th><th bgcolor="grey" td="" width="90">Séance</th><th bgcolor="grey" td="" width="90">Référence</th><th bgcolor="grey" td="" width="75">Format</th><th bgcolor="grey" td="" width="45">Impression</th><th bgcolor="grey" td="" width="45">Quantité</th><th bgcolor="grey" td="" width="45">Tarif</th></tr>
<tr>
   <td><input name="chk" size="15" type="checkbox" /></td>
    <td>
    <select name="Séance" style="width: 90;">
     <option selected="" value="Choix">Sélectionner votre séance</option>
     <option selected="" value="Séance 1">Séance 1</option>
     <option value="Séance 2">Séance 2Séance 2</option>
     </select>
 
   <td><input name="Ref" size="25" type="text" /></td>
   <td>
    <select name="Format" style="width: 90;">
     <option value="10*15">10*15</option>
     <option value="11*15">11*15</option>
     <option...

CSS

.coordonnees label {
    display: inline-block;
    width: 130px;
}

.coordonnees input {
    margin: 2px 0;
    padding: 2px;
    width: 300px;
}

.coordonnees legend {
    font-weight: bold;
    margin: 10px 0;
    font-size: 18px;
}

JavaScript

function addRow(tableID) {
      
 
   var table = document.getElementById(tableID);
 
   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);
 
   var colCount = table.rows[0].cells.length;
 
   for(var i=0; i<colCount; i++) {
 
    var newcell = row.insertCell(i);
 
    newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    //alert(newcell.childNodes);
    switch(newcell.childNodes[0].type) {
     case "text":
       newcell.childNodes[0].value = "";
       break;
     case "checkbox":
       newcell.childNodes[0].checked = false;
       break;
     case "select-one":
       newcell.childNodes[0].selectedIndex = 0;
       break;
     }
   }
  }
 
  function deleteRow(tableID) {
   try {
   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;
 
   for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
     if(rowCount <= 2) {
  addRow(tableID);
                // alert("Attention la 1ère ligne n'est pas supprimable. La quantité est initialisée à 0");
               //  break;
                    }
     table.deleteRow(i);
     rowCount--;
     i--;
    }
 
 
   }
   }catch(e) {
    alert(e);
   }
  }
 
function testValue(selection) {
  if (selection.value == "Dawn") {
	// do something
	}
  else if (selection.value == "Noon") {
	// do something
	}
  else if (selection.value == "Dusk") {
	// do something
	}
  else {
	// do something
	}
  }