JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<form id="add_recette" enctype="multipart/form-data" method="post" action="#">
    <p><input type="text" size="32" name="name" id="name" value="" placeholder="Titre..." /></p>
    <p><input type="file" size="32" name="my_field[]" value="" /></p>
    <p><input type="file" size="32" name="my_field[]" value="" /></p>
    <p><input type="file" size="32" name="my_field[]" value="" /></p>
 
    <p id="addTxt">>> Ajouter une Ă©tape</p>
    <div class="zones">
        <div class="texte"id="bloc_1">
            <label for="zone_1">Texte de la zone 1</label><br />
            <textarea class="zone_1 txt" id="zone_1" name="section[]" ></textarea>
        </div>
    </div>

</form>

JavaScript

$(function(){
  var identifiantAdd = 2;
  $("#addTxt").click(function(){
    $('.zones').append('<div class="texte" id="bloc_'+identifiantAdd+'">\n\<label for="zone_'+identifiantAdd+'">Texte de la zone '+identifiantAdd+ '</label><br />\n\<textarea class="zone_'+identifiantAdd+' txt" id="zone_'+identifiantAdd+'" name="section[]" /></textarea><br /><p class="removeInput">Suppr</p>\n\</div>');
    
    $('#bloc_'+identifiantAdd+' .removeInput').on('click',function(){
      $('.zones').children('.texte').last().remove();
    })
    identifiantAdd+=1;
  });      
})