JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="#" id="form_ajout_arbre">
<div id="exemple" class="arbre_bloc">
		<h3></h3>
		<p>Nom : <input type="text" name="nom"></p>
		<p>Réponse : <input type="text" name="reponse"></p>
		<p>Solution :</p> <textarea rows="4" cols="50"></textarea>
		<p><button class="add_field_button">Ajouter un niveau</button></p>
	</div>
		
  <div class="arbre_bloc" id="0">
		<h3>Niveau : 0</h3>
		<p>Nom : <input type="text" name="nom"></p>
		<p>Réponse : <input type="text" name="reponse"></p>
		<p>Solution :</p> <textarea rows="4" cols="50"></textarea>
		<p><button class="add_field_button">Ajouter un niveau</button></p>
		</div>
		<p><input type="submit" value="Envoyer" /></p>
	
	</form>

CSS

.arbre_bloc {
  background-color: #E2EBF0;
  font-size: 13px;
  margin: 10 auto;
  padding: 15px;
  border: 1px solid #000;
}
#exemple{
  display:none;
  }
}

JavaScript

$(document).ready( function() {
		$('.reponse').click( function() {
			$idparent = $(this).attr('id');
			$('#contenu_arbre').load('arbre-test.php?idparent='+$idparent); 
		});
		
		var max_fields      = 100; //maximum input boxes allowed
		var wrapper         = $(".arbre_bloc"); //Fields wrapper
		var add_button      = $(".add_field_button"); //Add button ID
		var cloneCount = 1;

		$(add_button).click(function(e){ //on add input button click
			id_du_parent = $(this).parent().parent().attr("id");
			var id_frere = $(this).parent().next().attr('id');
			nouvel_id = id_du_parent+'-'+cloneCount++;
			if(id_frere!==undefined){
				 var arrayOfStrings = id_frere.split("-");
				 last_element = arrayOfStrings[arrayOfStrings.length - 1];
				 id = parseInt(last_element)+1;
				 nouvel_id=id_du_parent+'-'+id;
			}else{
				nouvel_id = id_du_parent+'-1';			
			}
			
			e.preventDefault(); //evite de recharger la page
			$('#exemple > h3').text('Niveau : '+nouvel_id);
			$('#exemple')
			  .clone(true, true)
			  .attr('id', nouvel_id)
			  .insertAfter($(this).parent());
		}); 
	});