JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">	
	<div id="accordeon">

	  	<h3>paragraphe 1</h3>
	   	    <fieldset>
		        <div align-center>
                C'est le premier formulaire
		          <input type="button" id="button1" value="Suivant"/>
				</div>
		    </fieldset>

	  	<h3>paragraphe 2</h3>
	  		<fieldset>
                <div align-center>
	  			c'est le deuxieme formulaire
				<input type="button" id="button2" value="Suivant" />
			    </div>
	  		</fieldset>

	  	<h3>paragraphe 3</h3>
	  		<fieldset>
               <div align-center>
			    C'est le troisieme formulaire
                <input type="button" id="button3" value="Suivant"/>
		 	    </div>
			</fieldset>
  
	  	<h3>paragraphe 4</h3>
        <fieldset>
	  		<div>
		    c'est le 4eme et dernier formulaire.
		    <input type="submit" name="validation" id="4" value="validation du formulaire">
             </div>
            </fieldset>
	</div>
</div>

JavaScript

$(document).ready(function(){
  		$('#accordeon').accordion({
            heightStyle: "content",
            collapsible: true,
            active:0
		});


		$( "input[type=submit], input[type=button]" )
      		.button()
      		.click(function() {
		   		var inputId = this.id.substring(6);
                console.log(inputId);
				$('#accordeon').accordion("option" , "active" , parseInt(inputId));
      		});	
    });