JSFiddle - React, Tailwind, and code Playground

HTML

<form action="javascript:;" method="POST" onsubmit="return verifForm(this)">
   <div class="left">
   <p>Nom : <br>
   <input type="text" name="nom" /></p>
   <p>Prenom : <br>
   <input type="text" name="prenom" /></p>
   <p>Adresse : <br>
   <input type="text" name="adresse" /></p>
   <p>E-Mail : <br>
   <input type="text" name="mail" onblur="verifMail(this)"/></p>
   </div>
   <div class="right">
   <br>
   <p>Code Postal : <br>
   <input type="text" name="cp" /></p>
   <p>Ville : <br>
   <input type="text" name="ville" /></p>
   <p>Pays : <br>
   <input type="text" name="pays" /></p>
   </div>
   <div class="center">
   <p>Société ( facultatif )<br>
   <input type="text" name="societe" /></p>
   <p>Numero de TVA ( si vous êtes une société assujettie ) : <br>
   <input type="text" name="tva" /></p>
   </div>
   <fieldset>
    <legend>Coordonnées des matériels à prendre en extension de garantie</legend>
   <table id="produit">
    <tr>
     <td>N°</td>
     <td>Marque</td>
     <td>Référence</td>
     <td>Date d’achat</td>
     <td>Lieu d’achat</td>
     <td>Vendeur</td>
     <td>N°Série</td>
    </tr>
    <tr>
     <td><input type="text" name="materiel0" size="5" value="0" disabled/></td>
     <td><input type="text" name="marque0" size="15"/></td>
     <td><input type="text" name="ref0" size="15"/></td>
     <td><input type="text" name="dateachat0" size="15"/></td>
     <td><input type="text" name="lieuachat0" size="15"/></td>
     <td><input type="text" name="vendeur0" size="15"/></td>
     <td><input type="text" name="serial0" size="15"/></td>
    </tr>
   </table>
   <input type="button" value="Ajouter un produit" onClick="AddOneRow()" >
   </fieldset>
   <br>
   <input type="submit" value="Valider" />
  </form>

JavaScript

var nbproduit=0;
function AddOneRow(){
    nbproduit = nbproduit+1;
    var newRow = document.getElementById('produit').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = '<input type="text" name="materiel'+nbproduit+'" size="5" value="'+nbproduit+'" disabled/>';
    var newCell = newRow.insertCell(1);
    newCell.innerHTML = '<input type="text" name="marque'+nbproduit+'" size="15"/>';
    var newCell = newRow.insertCell(2);
    newCell.innerHTML = '<input type="text" name="ref'+nbproduit+'" size="15"/>';
    var newCell = newRow.insertCell(3);
    newCell.innerHTML = '<input type="text" name="dateachat'+nbproduit+'" size="15"/>';
    var newCell = newRow.insertCell(4);
    newCell.innerHTML = '<input type="text" name="lieuachat'+nbproduit+'" size="15"/>';
    var newCell = newRow.insertCell(5);
    newCell.innerHTML = '<input type="text" name="vendeur'+nbproduit+'" size="15"/>';
    var newCell = newRow.insertCell(6);
    newCell.innerHTML = '<input type="text" name="serial'+nbproduit+'" size="15"/>';
}
function verifForm(f)
{
   var nomOk = verifVide(f.nom);
   var prenomOk = verifVide(f.prenom);
   var adresseOk = verifVide(f.adresse);
   var mailOk = verifMail(f.mail);
   var cpOk = verifVide(f.cp);
   var villeOk = verifVide(f.ville);
   var paysOk = verifVide(f.pays);
   var marque = new Array();
   var ref = new Array();
   var dateachat = new Array();
   var lieuachat = new Array();
   var vendeur = new Array();
   var serial = new Array();
 
   for (i=0; i<2; i++) {
 
 var marque_i = 'f.marque'+i;
 marque_i = eval(marque_i);
 marque[i] = verifVide(marque_i);
 //alert(marque[i]); => je recoit l'alerte
 var ref_i = 'ref'+i;
 ref_i = eval(ref_i);
 ref[i] = verifVide(ref_i);
 //alert(ref[i]); => Aucune alerte, la page se recharge après la première :/
 var date_i = 'dateachat'+i;
 date_i = eval(date_i);
 dateachat[i] = verifVide(date_i);
 var lieu_i = 'lieuachat'+i;
 lieu_i = eval(lieu_i);
 lieuachat[i] = verifVide(lieu_i);
 var...