JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css">
        <button id="add_article" class="btn btn-success">Add</button>
        <button id="del_article" class="btn btn-danger">Delete</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>

        <table id="fantome" style="display:none">
          <tbody>
            <tr>
              <td><input type="checkbox" name="chkbox[]"></td>
              <td>
                <select type="text" class="form-control" id="element">
                    <option value="1">Element 1</option>
                    <option value="2">Element 2</option>
                    <option value="3">Element 3</option>
                    <option value="4">Element 4</option>
                </select>
              </td>
              <td><input type="text" class="form-control article_refarticle" /></td>
              <td><input type="text" class="form-control article_devis"></td>
              <td><input type="text" class="form-control article_designationarticle"></td>
              <td><input type="text" class="form-control article_pu"></td>
              <td><input type="text" class="form-control article_unite"></td>
              <td><input type="text" class="form-control...

JavaScript

// AJOUTER UN ARTICLE DANS LE DEVIS               
    $(document).ready(function()
    {
        var Table_noms_messages = document.getElementById('table_article');
    
          const TR_Base = document.querySelector('#fantome tbody tr');
 
          $('#add_article').click(function () {    // "Ajouter un produit"
            Table_noms_messages.appendChild(TR_Base.cloneNode(true) );
            var newSelectId = 'select' + Date.now();
            //select 2
            $('#element').attr('id', newSelectId).select2({tags: true});
          });
  
    
        $('#del_article').click(function() {
            try {
                var rowCount = Table_noms_messages.rows.length;
                for(let i=0; i<rowCount; i++) {
                let
                    ligneT = Table_noms_messages.rows[i],
                    chkbox = ligneT.cells[0].childNodes[0]
                ;
                if(chkbox!=null && chkbox.checked)
                {
                    Table_noms_messages.deleteRow(i);
                    rowCount--;
                    i--;
                }
                }
            }
            catch(e) {
                alert(e);
            }
        });
    
        $('#del_article').click(function() {
            try {
                var rowCount = Table_noms_messages.rows.length;
                for(let i=0; i<rowCount; i++) {
                let
                    ligneT = Table_noms_messages.rows[i],
                    chkbox = ligneT.cells[0].childNodes[0]
                ;
                if(chkbox!=null && chkbox.checked)
                {
                    Table_noms_messages.deleteRow(i);
                    rowCount--;
                    i--;
                }
                }
            }
            catch(e) {
                alert(e);
            }
        });
        //article
        $('#envoi_article').click(function() {
        var params_envoi = {
            article_ref: [],
            article_contact  : [], 
  ...