JSFiddle - React, Tailwind, and code Playground

HTML

<td style="width: 196px;">Total Hors Taxe : <div id="s1"><input name="prixht" id="prixht" type="text" readonly="readonly" /></div>&nbsp;</td>
<input onclick="test()" type="button" value="test" />
 
 <title> Tableau de commande </title>
 <script language="javascript">
     
     </fieldset>
</form>
</head>
<body>
 
 <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">Prix</th></tr>
<tr>
   <td><input name="chk" size="15" type="checkbox" /></td>
    <td>
    <select name="Séance" style="width: 90;">
    <option selected="" value="Sélectionnez votre séance">Sélectionnez 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 onchange="Format(this)" style="width: 90;">
      <option value="10*15">10*15</option>
     <option value="11*15">11*15</option>
     <option value="20*30">20*30</option>
    </select>
   </td>
<td>
    <select name="Impression" style="width: 10;">
     <option value="Mat">Mat</option>
     <option value="Brillant">Brillant</option>
     <option value="Satiné">Satiné</option>
    </select>
   </td>
 
 <td><input name="Quantite" id="quantite" size="2" type="text" /></td>    
 
 <td><input name="prix" id="prix" size="3" type="text" readonly="readonly" /></td>    
 
 
</tr>
</table>
<input onclick="addRow('TableID')" type="button" value="Ajouter" />
<input onclick="deleteRow('TableID')" type="button" value="Supprimer" />
</body></html>

JavaScript

function test(){
 
var prixht = document.getElementById('prixht');
var vs1 = 270;
var vs2 = 10;
prixht.value = vs1 + vs2 ;
}
 
 
 
 
  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("Cannot delete all the rows.");
               //  break;
                    }
     table.deleteRow(i);
     rowCount--;
     i--;
    }
 
 
   }
   }catch(e) {
    alert(e);
   }
  }

function Format(selection) {
  if (selection.value == "10*15") {
   var quantite = document.getElementById('quantite');
   prix_format= 1;
   var prix = document.getElementById('prix');
   prix.value = quantite * prix_format;
 
 }
  else if (selection.value == "11*15") {
 
var prix = document.getElementById('prix');
   var quantite = document.getElementById('quantite');
   prix_format= 2;
   var prix = document.getElementById('prix');
   prix.value = quantite * prix_format;
 
 }
  else if (selection.value == "20*30") {
   var quantite = document.getElementById('quantite');
   prix_format= 3;
   var prix =...