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="1" value="Suivant"/>
				</div>
		    </fieldset>

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

	  	<h3>paragraphe 3</h3>
	  		<fieldset>
               <div align-center>
			    C'est le troisieme formulaire
                <input type="button" id="3" 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
		});

		$('#2').click(function() {
  			$('#accordeon').accordion('option', 'active', 1);
		});

		$( "input[type=submit], input[type=button]" )
      		.button()
      		.click(function() {
		   		var inputId = this.id;
    console.log(inputId);
				$('#accordeon').accordion("option" , "active" , parsInt(inputId));
				$('#accordeon > h3:[inputId-1]').addClass( "ui-state-disabled" );

      		});	
  		});