JSFiddle - React, Tailwind, and code Playground

HTML

<form method="POST" name="myCandidat" id="myCandidat" class="pure-form pure-form-aligned" action="" enctype="multipart/form-data">

<div class="col-md-6">
<div id="divGlobal" ></div>

<div class="col-md-9">
<div id="id_1">
<h2>
	Interview 1
</h2>
<div class="form-group">
	<label class="form-label" for="dateInterview">Date :</label>
	<input type="text" name="dateInterview_1" id="dateInterview_1" placeholder="" accept="" class="form-control"/>
</div>
<div class="form-group">
	<label class="form-label" for="jobTitle">Intituler du job :</label>
	<input type="text" name="jobTitle_1" id="jobTitle" placeholder="" class="form-control"/>
</div>
<div class="form-group">
	<label class="form-label" for="workplace">Lieu du poste :</label>
	<select name="workplace_1" id="workplace" class="form-control">
		<option value="Paris">Paris</option>
		<option value="Chine">Chine</option>
	</select>
</div>
<div class="form-group">
	<label class="form-label" for="interviewerName">Interviewer par :</label>
	<input type="text" name="interviewerName_1" id="interviewerName" placeholder="" class="form-control"/>
</div>
<div class="form-group">
	<label class="form-label" for="noteInterview">Note :</label>
	<textarea type="text" name="noteInterview_1" id="noteInterview" placeholder="" class="form-control"></textarea>
</div>
<div class="form-group">
	<label class="form-label" for="RecommandationInterview">Recommandations :</label>
	<textarea type="text" name="RecommandationInterview_1" id="RecommandationInterview" placeholder="" class="form-control"></textarea>
</div>
</div>
</div>

<div class="col-md-9">
<div class="btn-group">
	<button type="button" onclick="interviewFormFunction()" class="btn btn-danger"> <span class="glyphicon glyphicon-plus"></span>add form </button>
</div> 
</div>

</div>

</form>

JavaScript

var i=1; 

function removeElement(parentDiv, childDiv){

    if (document.getElementById(childDiv)){
        var child = document.getElementById(childDiv);
        child.parentNode.removeChild(child);
        //decrement();    
    }
    
}

window.removeElement = function(parentDiv, childDiv){

    if (document.getElementById(childDiv)){
        var child = document.getElementById(childDiv);
        child.parentNode.removeChild(child);
        //decrement();    
    }
};


window.interviewFormFunction = function(){
    var divForm1 = document.createElement('div');
    divForm1.classList.add('form-group');
    i++; 
    
    var divGlobal = document.createElement('div');
    divGlobal.setAttribute("id", "id_"+i);
    
    var title = document.createElement('h2');
    title.innerHTML = "Interview " + i;
    divGlobal.appendChild(title);
    
    var labelDate = document.createElement('label');
    labelDate.classList.add("form-label");
    labelDate.setAttribute("for", "dateInterview");
    labelDate.innerHTML = "Date :";
    
    var inputDate = document.createElement("input");
    inputDate.setAttribute("type", "text");
    inputDate.setAttribute("name", "dateInterview_"+i);
    inputDate.setAttribute("id", "dateInterview");
    inputDate.setAttribute("placeholder","");

    inputDate.classList.add("form-control");
    
    divForm1.appendChild(labelDate);
    divForm1.appendChild(inputDate);
    divGlobal.appendChild(divForm1);
    
 

    /*******************************************/
    
    var divForm2 = document.createElement('div');
    divForm2.classList.add('form-group');
    
    var labelJob = document.createElement('label');
    labelJob.classList.add("form-label");
    labelJob.setAttribute("for", "jobTitle");
    labelJob.innerHTML = "Intituler du job :";
    
    var inputJob = document.createElement("input");
    inputJob.setAttribute("type", "text");
    inputJob.setAttribute("name", "jobTitle_"+i);
    inputJob.setAttribute("id", "jobTitle");
 ...