JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bloc_formresa">
                        <h3 class="header_cont_occupant">
                            <div class="titre_occupant">occupants de votre hébergement</div>
                            <div class="supprimer_occupant"><a class="suppr_person" href="#" title="Cliquez pour supprimer un occupant">sup</a></div>
                            <div class="ajouter_occupant"><a class="ajout_person" href="#" title="Cliquez pour ajouter un occupant">ajo</a></div>
                        </h3>
                        <div class="middle_formresa">
                            <div class="bloc_occupant">
                                <div class="header_bloc_occupant">
                                    <h3 class="num_occupant">occupant</h3>
                                </div><!--fin header_bloc_occupant--> 
                                <div class="milieu_bloc_occupant">
                                    <label class="nom_occupant">Nom</label>
                                    <input name="champ_nom" type="text"/>
                                    <label class="prenom_occupant">Prénom</label>
                                    <input name="champ_prenom" type="text"/>
                                    <label class="datenaissance_occupant">Date de Naissance</label>
                                    <input name="champ_date" type="text" id="datenaissance" />
                                </div><!--fin header_bloc_occupant-->
                            </div><!--fin bloc_occupant--> 
                            
                        </div><!--fin titre_formresa--> 
                    </div><!--fin bloc_formresa-->

CSS

@import url(http://fonts.googleapis.com/css?family=Comfortaa:400,700,300);

#container {
    font-size:12px;
    font-family: Tahoma, Geneva, sans-serif;
   
}
.form-resa{
    width:958px;
    padding:15px;
    background:rgba(255,255,255,0.7);
    -webkit-box-shadow: 0px 0px 15px 2px #fff;
    box-shadow: 0px 0px 15px 2px #fff;
    height:auto;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #fff;
}
.conteneur-navigation{
    width:100%;
    height:auto;
    padding:0;
    margin:0;
    
}
.conteneur-navigation ul{
    width:100%;
    height:auto;
    padding:0;
    margin:0;
    overflow: hidden;
}
.conteneur-navigation li{
    font-family: 'Comfortaa', Trebuchet MS;
    float:left;
    list-style:none;
    padding:8px 15px 8px 5px;
    margin:10px 35px 10px 0;
    color:#ffae00;
    font-size:14px;
    font-weight:700;
    position:relative;
}
.conteneur-navigation li::after{
    content: "";
    position: absolute;
    left: -26px;
    top: 11px;
    background: url(images/next.png) no-repeat 0 0;
    width: 18px;
    height: 17px;
}
.conteneur-navigation li span{
    background:#fff;
    padding:10px 5px;
    margin-right:8px;
    color:#2094d5;
    width:20px;
    font-size:18px;
    border:solid 1px #ffae00;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.conteneur-navigation .select{
    background:#ffae00;
    color:#fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.info_enseigne{
    width:940px;
    height:auto;
    padding:10px;
    margin:15px 0;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border:solid 1px #ddd;
    background:#f0f0f0;
}
.tarif_resa{
    float:right;
    width:120px;
    height:auto;
    background:#2094d5;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border-right:solid 1px #0e6ea3;
    border-bottom:solid 2px #0e6ea3;
}
.nb_personne, .date_select{
    font-size:13px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   ...

JavaScript

$(document).ready(function(){
    var i = 0;
    $('.ajout_person').live("click", function(){
        $('<div class="ajout_bloc_occupant"><div class="ajout_header_bloc_occupant"><h3 class="ajout_num_occupant">occupant</h3></div><div class="ajout_milieu_bloc_occupant"><label class="ajout_nom_occupant">Nom</label><input name="champ_nom" type="text"/><label class="ajout_prenom_occupant">Prénom</label><input name="champ_prenom" type="text"/><label class="ajout_datenaissance_occupant">Date de Naissance</label><input name="champ_date" type="text" id="ajout_datenaissance_"+i/></div>').insertAfter('.bloc_occupant');

        $("#ajout_datenaissance").datepicker({
            showButtonPanel: true,closeText: 'Fermer',prevText: '&#x3c;Préc',nextText: 'Suiv&#x3e;',currentText: 'Courant',dateFormat: "dd/mm/yy", buttonText: "Choisissez votre date de départ",defaultDate: +7,showOn: "both", buttonImage: "styles/page/images/calendar.png",buttonImageOnly: true,numberOfMonths: 1,changeMonth: true,changeYear: true,showOtherMonths: true,selectOtherMonths: true,firstDay: 1,monthNames: ["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],monthNamesShort: ["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],yearRange: "2010:2014"});
            
        $(".suppr_person").live("click", function(){
        $(".ajout_bloc_occupant").remove();
        });
    });
    });