JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;script type=&quot;text/javascript&quot;&gt;     var data = &lt;?= json_encode(!empty($data ) ? $data : array()); ?&gt;   &lt;/script&gt;  &lt;script type=&quot;text/javascript&quot;&gt;  /* var data = &lt;?= json_encode(!empty($data ) ? $data : array()); ?&gt;   var keyByIndex = [&#39;Arexx_index&#39;, &#39;Arex"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="animate.css" media="screen" />

	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
	 <link rel="stylesheet" type="text/css" href="buttons.css"/>


<script type='text/javascript'>

// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#sForm').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('.button.plusTd').click(function()
  {
      jQuery('#sForm').toggle(400);
      return false;
   });
});
/* ]]> */ 

// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#sForm').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('.button.plusTd2').click(function()
  {
      jQuery('#sForm').toggle(400);
      return false;
   });
});
/* ]]> */ 


/*      La le texte est en brut mais l'interet serait
        de mettre un iD a ce <tr> et de copier le
        contenu grace à clone();
        http://api.jquery.com/clone/                                    */
jQuery(document).ready(function()
{




$('.plusTd1').on('click',function() {
    $('#sformadd').after('<tr><td><input type="text" name="nom[]" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td> <td><input type="text" name="id[]" size="15" id="text1"  value="" class="remplit" maxlength="20"> </td> <td><input type="text"  size="15" name="type[]" id="text2" value="" class="remplit" maxlength="20"><br></td> <td><input type="text"...

CSS

* {
    margin: 0;
    padding: 0;
    font-family: Lato;
}
.flatTable {
    width: 1200px;
    border-collapse: collapse;
    font-weight: bold;
    color: #6b6b6b;
    border : none;
    text-align: center;
    vertical-align:middle;
    -webkit-box-shadow: 0px 3px 25px 10px rgba(0, 0, 0, 0.55);
    -moz-box-shadow: 0px 3px 25px 10px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 3px 25px 10px rgba(0, 0, 0, 0.55);
}
.flatTable tr {
    height: 50px;
    background: #d4d1d5;
    border-bottom: rgba(0, 0, 0, 0.05) 1px solid;
    text-align: center;
    vertical-align:middle;
}
.flatTable td {
    box-sizing: border-box;
    text-align: center;
    vertical-align:middle;
}
.flatTable .titleTr {
    height: 70px;
    color: #f6f3f7;
    background: #418a95;
}
.flatTable .plusTd {
    background: url(http://i.imgur.com/3hSkhay.png) center center no-repeat, rgba(0, 0, 0, 0.1);
    float: right;
    height: 70px;
    width: 80px;
    padding-top: 25px;
    box-sizing: border-box;
}
.flatTable .plusTd1 {
    background: url("http://i.imgur.com/3hSkhay.png") no-repeat scroll center center, none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);
    height: 70px;
    width: 80px;
    position: absolute;
    box-sizing: border-box;
    padding-top: 25px;
    float: left;
    margin-right: -100px;
    margin-left: -240px;
}
.flatTable .plusTd2 {
    background: url("http://i.imgur.com/nnzONel.png") no-repeat scroll center center, none repeat scroll 0% 0% rgba(255, 0, 0, 0.4);
    position: absolute;
    height: 70px;
    width: 80px;
    padding-top: 25px;
    box-sizing: border-box;
    margin-left: -80px;
}
.flatTable .plusTd3 {
    background: url(valid.png) center center no-repeat, rgba(0, 0, 0, 0.1);
    height: 70px;
    width: 80px;
    padding-top: 25px;
    box-sizing: border-box;
}
.flatTable .plusTd4 {
    background: url("valid.png") no-repeat scroll center center, none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);
    height: 70px;
    width: 80px;
    padding-top: 25px;
   ...

JavaScript

var data = <?= json_encode(!empty($data ) ? $data : array()); ?>
 
  

var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index'];

$('.controlTd').on('click', function () {
    if (!$('.contenu').hasClass('isEditable')) {
        $(".contenu td center").each(function(){ 
            var contenuElement = $(this).text(); 
            $(this).html("<input class='modif_input'STYLE='Text-ALIGN:center'/>");
            $(this).children("input").val(contenuElement);
        });
    
        $('.contenu .controlTd1').empty().append('<button class="btn btn-danger" type="button">Annuler</button>');
        $('.contenu').addClass('isEditable');
    }
});

$('.controlTd1').on('click', function () {
    if ($('.contenu').hasClass('isEditable')) {
        $('.contenu').each(function () {
            $tr = $(this);
            $tr.find('td center').each(function (index) {
                $(this).find('input[type="text"]').remove();
                $(this).text(data[$tr.index()][keyByIndex[index]]);
            });
            $tr.find('.controlTd1').empty();
        });
         $('.contenu').removeClass('isEditable');
    }
});

// Délégation d'événement car le <button> n'est pas créer lors de la déclaration de l'événement.
$('.controlTd1').on('click', 'button', function () {
    var $this = $(this), 
        $tr = $this.closest('tr'),
        $cells = $tr.find('td');

    $cells.each(function (index, elt) { 
        $(this).find('input[type="text"]').remove();
        $(this).find('center').text(data[$tr.index()][keyByIndex[index]]);
    });
});
*/
var data = <?= json_encode(!empty($data ) ? $data : array()); ?>
var keyByIndex = ['Arexx_index', 'Arexx_Name', 'Arexx_Id', 'Arexx_Type', 'Arexx_Table', 'Arexx_index'];

var $btnUpdate = $('<button>Modifier</button>').addClass('btn btn-success'),
 var $btnReset = $('<button>Annuler</button>').addClass('btn btn-danger'),

$('.controlTd').on('click', '.btn', function () {
    var $this =...