JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gauche largeur640px gras" id="tabs0">
	<div class="gauche" style="width: 140px; border-bottom: 2px solid #e2e2e2; padding: 10px 5px; background-color: #f2f2f2;">
		Jour
	</div>
	<div class="gauche centrer" style="width: 330px; border-bottom: 2px solid #e2e2e2; padding: 10px 5px; background-color: #f2f2f2;">
		Horaires
	</div>
	<div class="gauche centrer" style="width: 140px; border-bottom: 2px solid #e2e2e2; padding: 10px 5px; background-color: #f2f2f2;">
		Options
	</div>
	<div class="gauche largeur640px" style="padding: 0 0 10px 0;">
		<div class="gauche gras" style="width: 150px; padding: 10px 0 0 5px;">
			 Lundi
		</div>
		<div id="HD_1" class="gauche centrer" style="width: 340px;">
			<div class="tranche_hor_1 gauche centrer" id="tranche_1_0" style="width: 340px; margin-top: 10px;">
				<input type="hidden" name="tabs[0][1][jour]" value="1">
				De <input type="text" name="tabs[0][1][0][from_d]" class="margeHautMoins4px time ui-timepicker-input" style="width: 60px;" autocomplete="off"> à <input type="text" name="tabs[0][1][0][from_f]" id="tabs010from_f" class="margeHautMoins4px time ui-timepicker-input" style="width: 60px;" autocomplete="off">
			</div>
			<div id="tabs01">
			</div>
		</div>
		<div class="gauche" style="margin: 10px 0 0 50px;">
			<div onclick="addRow(0, 1, 0);" class="gauche contentBulle marge0_5">
				<div class="bulle" style="margin-left: 10px;">
					<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, 0);" class="gauche contentBulle marge0_5">
				<div class="bulle" style="margin-left: 10px;">
					<div class="contentBulleFleche">
					</div>
					<div class="contentBulleDescription" style="font-weight:...

CSS

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent;}
h1, h2, h3, h4, h5, h6{font-weight:normal;clear:both;}
ol, ul{list-style:none;}
blockquote{quotes:none;}
blockquote:before, blockquote:after{content:'';}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
a img{border:none;}
input {-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;height:19px;-webkit-appearance:none;}
textarea, select { -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; }
body{font-family: Tahoma, Geneva, sans-serif;font-size:13px;background-color:#FFF;color:#1E1E1E;height:100%;line-height:17px;
background-image: url(../../images/general/bg.png),url(../../images/general/bg_gradient.png);
background-position: top center;
background-repeat: no-repeat, repeat;
background-image/*\**/: url(../../images/general/bg_gradient.png)\9;
background-position/*\**/: top center\9;
background-repeat/*\**/: repeat\9;
}
.texte {font-family: Tahoma, Geneva, sans-serif;font-size:13px;color:#1E1E1E;text-decoration:none;}
.pub2Fiche{float:left;width:300px;}
.pub3Resultat{float:left;}
.centrer{text-align:center}
#pub-sky1{height:0px;overflow:visible;position:relative;}
#pub-sky2{float:right;width:160px;height:640px;top:3px;left:321px;position:absolute;}
#pub-sky_resultat2{float:right;width:160px;height:640px;top:3px;left:320px;position:absolute;}
#wrapper{width:970px;margin:auto;border-left:0;border-right:0;padding:0 15px 0 15px;/*margin-top:36px;*/}
#wrapperFooter{width:1001px;margin:auto;border-left:0;border-right:0;margin-top:36px;}
@-moz-document url-prefix() { 
 ...

JavaScript

function addRow(num_tab, num_jour, num_ligne) {
    
    var nb_tranche = $(".tranche_hor_" + num_jour).size() -1;
    
    if (nb_tranche < 2){
        
		var num_ligne_suivante = nb_tranche + 1;
        
        var new_line = $("#tranche_" + num_jour + "_" + num_ligne).clone()
        .attr('id',   'tranche_' + num_jour + "_" + num_ligne_suivante)
        
        $(new_line).insertBefore( "#tabs" + num_tab + "" + num_jour + "" );
    }
} 
 
function delRow(num_tab, num_jour, num_ligne) {
    var nb_tranche = $(".tranche_hor_" + num_jour).size() - 1;
    if (nb_tranche > 0) $("#tranche_" + num_jour + "_" + nb_tranche).remove();
}

function duplicateRow(day){
    var last_day = $("#HD_" + (day - 1)).clone()
                     .attr('id',   'HD_' + day);
    
    $("#HD_" + day).replaceWith(last_day);
    
    var nb_tranche = 0;
    $("#HD_" + day).find('.tranche_hor_' + (day - 1)).each(function(){
        
            $(this).attr('id', "tranche_" + day + "_" + nb_tranche++ );   
            $(this).removeClass('tranche_hor_' + (day - 1));
            $(this).addClass('tranche_hor_' + (day));
        
         });
    
    $("#HD_" + day).find("div[id^='tabs']")
        .attr('id', "tabs0" + day );   
    
}