JSFiddle - React, Tailwind, and code Playground
HTML
<div class="gauche largeur640px gras" id="tabs0"><div class="gauche largeur640px" style="padding: 10px 0;">
<div class="gauche gras" style="width: 150px;">
Lundi </div>
<div class="gauche centrer" style="width: 340px;">
<div id="tranche_0" class="tranche_hor gauche centrer" style="width: 340px;">
<input type="hidden" name="tabs[0][1][jour]" value="1">
De <input type="time" name="tabs[0][1][from_h]" id="tabs[0][1][from_d]" step="1" min="00:00" max="23:59" value="00:00" class="margeHautMoins4px"> Ă
<input type="time" name="tabs[0][1][from_f]" id="tabs[0][1][from_f]" step="1" min="00:00" max="23:59" value="00:00" class="margeHautMoins4px"><br>
</div>
<div id="tabs01"></div>
</div>
<div class="gauche" style="margin-left: 50px;"> <div onclick="addRow(0,1);" class="gauche contentBulle marge0_5"><div class="bulle"><div class="contentBulleFleche"></div><div class="contentBulleDescription" style="font-weight: normal;font-size: 13px;">Ajouter une tranche horaire.</div></div><img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519691-199_CircledPlus-16.png" width="16" height="16" alt=""></div>
<div onclick="delRow(0,1);" class="gauche contentBulle marge0_5"><div class="bulle"><div class="contentBulleFleche"></div><div class="contentBulleDescription" style="font-weight: normal;font-size: 13px;">Supprimer une tranche horaire.</div></div><img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519643-144_Forbidden-16.png" width="16" height="16" alt=""></div> </div>
</div></div>
JavaScript
function addRow(num_tab, num_jour) {
var nb_tranche = $(".tranche_hor").size();
if (nb_tranche < 3){
var new_line = $("#tranche_0").clone().attr('id', 'tranche_' + nb_tranche);
$(new_line).insertAfter( "#tabs" + num_tab + "" + num_jour + "" );
}
}
function delRow(num_tab, num_jour) {
var nb_tranche = $(".tranche_hor").size() - 1;
if (nb_tranche > 0)
$("#tranche_" + nb_tranche).remove();
}