JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<form id="myForm">
<table class="table table-striped table-bordered">
<tr class="contenu">
    <td><center>1</center></td> 
    <td><center>Chaufferie_T</center></td> 
    <td><center>17946</center></td> 
    <td><center>1</center></td> 
    <td><center>tp_arexx_17946_1</center></td>
    <section title=".squaredFour">
        <!-- .squaredFour -->
        <div class="squaredFour">
            <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="1" /></td> 
            <label for="squaredFour"></label> 
        </div>
        <!-- end .squaredFour -->
    </section>
    <td class="controlTd"><button class="btn btn-success">Modifier</button></td>
    <td class="controlTd1"></td>
</tr>
<tr class="contenu">
    <td><center>2</center></td> 
    <td><center>Chaufferie_H</center></td> 
    <td><center>17946</center></td> 
    <td><center>3</center></td> 
    <td><center>tp_arexx_17946_3</center></td>
    <section title=".squaredFour">
        <!-- .squaredFour -->
        <div class="squaredFour">
            <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td> 
            <label for="squaredFour"></label> 
        </div>
        <!-- end .squaredFour -->
    </section>
    <td class="controlTd"><button class="btn btn-success">Modifier</button></td>
    <td class="controlTd1"></td>
</tr>
</table>
</form>
<div id="consoleLog"></div>

JavaScript

var data = [
    {'Arexx_index': 1, 'Arexx_Id': 17946, 'Arexx_Type': 1, 'Arexx_Table': 'tp_arexx_A7946_1', 'Arexx_Name': 'Chaufferie_T'},
    {'Arexx_index': 2, 'Arexx_Id': 17946, 'Arexx_Type': 3, 'Arexx_Table': 'tp_arexx_17946_3', 'Arexx_Name': 'Chaufferie_H'}
];

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

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

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

    if (!$tr.hasClass('isEditable')) {
        $tr.find('td center').each(function(){ 
            var contenuElement = $(this).text(); 
            $(this).html("<input class='modif_input'STYLE='Text-ALIGN:center'/>");
            $(this).children("input").val(contenuElement);
        });

        $tr.find('.controlTd1').empty().append($btnReset.clone());
        
        $this.remove();
        
        $tr.addClass('isEditable');
    }
});

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

        $tr.find('.controlTd').empty().append($btnUpdate.clone());
        
        $this.remove();
        
        $tr.removeClass('isEditable');
    }
});