JSFiddle - React, Tailwind, and code Playground

by zarkoffe

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

        <hr>  <!-- line -->
        <button id="add_article" class="btn btn-success">Ajouter un produit</button>
        <button id="del_article" class="btn btn-danger">Supprimer le(s) produit(s)</button>
        <table class="table table-bordered table-striped table-condensed">
          <thead>
            <tr>
              <th width="40"></th>
              <th width="1"></th>
              <th width="20">Ref</th>
              <th width="20">Ref Article</th>
              <th width="20">Désign Article</th>
              <th width="10">Unite</th>        
              <th width="40">Prix Unitaire</th>
              <th width="40">Quantité</th>
              <th width="40">Prix Net Unité</th>
            </tr>
          </thead>
          <tbody id="table_article"> </tbody>
        </table>
        <div id="devis_requete"></div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Retour</button>
          <button id="bt_Envoi" class="btn btn-primary submit">Enregistrer le devis</button>
        </div>
      </div>

JavaScript

//envoie des data pour l'insertion SQL
  $(document).ready(function(){
    $('#bt_Envoi').click(function(){
    $(".thedevis").slideDown().load("../PHP/Traitement/devis.php", {
      devis_ref: $('.devis_ref').val(),
      devis_contact: $('.devis_contact').val(),
      devis_fournisseur: $('.devis_fournisseur').val(),
      devis_fabricant: $('.devis_fabricant').val(),
      devis_date: $('.devis_date').val(),
      devis_daterelance: $('.devis_daterelance').val()});
      });
  });
  //insérer plusieurs articles en bdd

    // AJOUTER UN ARTICLE DANS LE DEVIS               
    $(document).ready(function()
    {
        var Table_noms_messages = document.getElementById('table_article');
    
        $('#add_article').click(function() {
        var
            rowCount      = Table_noms_messages.rows.length,
            nvlle_ligneT  = Table_noms_messages.insertRow(rowCount),
            cell_0        = nvlle_ligneT.insertCell(0),
            cell_1        = nvlle_ligneT.insertCell(1),
            cell_2        = nvlle_ligneT.insertCell(2),
            cell_3        = nvlle_ligneT.insertCell(3),
            cell_4        = nvlle_ligneT.insertCell(4),
            cell_5        = nvlle_ligneT.insertCell(5),
            cell_6        = nvlle_ligneT.insertCell(6),
            cell_7        = nvlle_ligneT.insertCell(7),       
            cell_8        = nvlle_ligneT.insertCell(8), 
            nv_input      = document.createElement("input")
        ;
        nv_input.type  = "checkbox";
        nv_input.name  = "chkbox[]";
    
        cell_0.appendChild(nv_input);
        cell_1.innerHTML = "<input type='text' class='form-control article_ref' />";
        cell_2.innerHTML = "<input type='text' class='form-control article_refarticle' />";
        cell_3.innerHTML = "<input type='text' class='form-control article_devis' />";
        cell_4.innerHTML = "<input type='text' class='form-control article_designationarticle' />";
        cell_5.innerHTML = "<input...