JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<hr>
<form id="form1" method="post">
<div id="namediv"><label>Name</label>
    <input type="text" name="name" class="name" placeholder="Name"/><br/></div>
<div id="emaildiv"><label>Gender</label>
<input type="text" name="gender" class="gender" placeholder="Gender"/></div>
<input type="hidden" name="stage" class="stage" value="0" />
</form>
<div>
<button id="btn">Send Data</button>
</div>
<div id="result"></div>
<br/>
    
Request

<form id="form2" method="post">
<div id="namediv"><label>Name</label>
    <input type="text" name="name" class="name" placeholder="Name"/><br/></div>
<div id="emaildiv"><label>Gender</label>
<input type="text" name="gender" class="gender" placeholder="Gender"/></div>
<input type="hidden" name="stage" class="stage" value="0" />
</form>
<button id="rqst">Send Data</button>

<div id="result"></div>

JavaScript

$(document).ready(function(){
		$("#btn").click(function(){
			var vname = $("#form1 .name").val();
			var vgender = $("#form1 .gender").val();
			var vstage =$("#form1 .stage").val();
			alert(vname+" Using btn");
	});
	$("#rqst").click(function(){
			var vname = $("#form2 .name").val();
			var vgender = $("#form2 .gender").val();
			var vstage =$("#form2 .stage").val();
			alert(vname+" Using rqst");
	});
});