<!DOCTYPE html>
<html lang="en">
  <head>
  <script>
  /**
 * Define a function to navigate betweens form steps.
 * It accepts one parameter. That is - step number.
 */
 const navigateToFormStep = (stepNumber) => {
    /**
     * Hide all form steps.
     */
    document.querySelectorAll(".form-step").forEach((formStepElement) => {
        formStepElement.classList.add("d-none");
    });*/
    /**
     * Mark all form steps as unfinished.
     
    document.querySelectorAll(".form-stepper-list").forEach((formStepHeader) => {
        formStepHeader.classList.add("form-stepper-unfinished");
        formStepHeader.classList.remove("form-stepper-active", "form-stepper-completed");
    });
    /**
     * Show the current form step (as passed to the function).
     */
    document.querySelector("#step-" + stepNumber).classList.remove("d-none");
    /**
     * Select the form step circle (progress bar).
     */
    const formStepCircle = document.querySelector('li[step="' + stepNumber + '"]');
    /**
     * Mark the current form step as active.
     */
    formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-completed");
    formStepCircle.classList.add("form-stepper-active");
    /**
     * Loop through each form step circles.
     * This loop will continue up to the current step number.
     * Example: If the current step is 3,
     * then the loop will perform operations for step 1 and 2.
     */
    for (let index = 0; index < stepNumber; index++) {
        /**
         * Select the form step circle (progress bar).
         */
        const formStepCircle = document.querySelector('li[step="' + index + '"]');
        /**
         * Check if the element exist. If yes, then proceed.
         */
        if (formStepCircle) {
            /**
             * Mark the form step as completed.
             */
            formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-active");
            formStepCircle.classList.add("form-stepper-completed");
        }
    }
};
/**
 * Select all form navigation buttons, and loop through them.
 */
document.querySelectorAll(".btn-navigate-form-step").forEach((formNavigationBtn) => {
    /**
     * Add a click event listener to the button.
     */
    formNavigationBtn.addEventListener("click", () => {
        /**
         * Get the value of the step.
         */
        const stepNumber = parseInt(formNavigationBtn.getAttribute("step_number"));
        /**
         * Call the function to navigate to the target form step.
         */
        navigateToFormStep(stepNumber);
    });
});
</script>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>
    <link href="css/styles3.css" rel="stylesheet" type="text/css">
 
	  <style>
	  .navbar-nav ul{
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
	
}
.nav-item li{
	display: inline-flex;
	
}
.navbar-brand a{
	text-decoration: none;
	width: 100px;
	display: block;
	padding: 15px;
	font-size: 17px;
	transition: 0.4;
	text-align: center;
}
      </style>
    <!-- Bootstrap -->
	<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
	<link href="styles.css" rel="stylesheet" type="text/css">
	  <link rel="shortcut icon" href="images/favicon.ico"/>
	  <link href="styles3.css" rel="stylesheet" type="text/css">
	  <style type="text/css">
	  body{
	font-size: small;
}
    #hiddenDiv {
      display: none;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }
	#hiddenDiv1 {
      display: none;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }
	#hiddenDiv2 {
      display: none;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }
	  </style>
    
  </head>
  <body>
  
  <div class="container-fluid">
  <div class="container">
    
      <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent1">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active"> <a class="nav-link" href="summary.html">Summary <span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="attandance.html">Attendance</a> </li>
            <li class="nav-item"> <a class="nav-link" href="students.html">Students</a></li>
            <li class="nav-item"> <a class="nav-link" href="teachers.html">Teachers &amp; Staff</a></li>
            <li class="nav-item"> <a class="nav-link" href="watchlist.html">WatchList</a></li>
			<li class="nav-item"> <a class="nav-link" href="contactUs.html">Contact Us</a></li>
          </ul>
			<a href="login.php" role="button" class= "btn btn-primary"> Log In </a>
			&nbsp;&nbsp;&nbsp;
		    <a href="registration.php" role="button" class= "btn btn-primary"> Register </a>
			
<form class="form-inline my-2 my-lg-0">
</form>
        </div>
      </nav>
	<header>
	    <div class="row" style="margin-top: 10px;">
	      <div class="col-lg-2"><img src="images/logo.png" alt="" width="100" height="100" class="rounded-circle" align="left"></div>
	      <div class="col-lg-8" >
	        <h4 class="text-center text-capitalize"><strong>SCHOOLS MANAGEMENT SYSTEM </strong><br>
Elementary and Secondary Education Male <br>
District Kotli AJK</h4>
          </div>
	</div>	</header>	
           <section class="form-step">
                <h2 class="font-normal" align="center" >Total Post</h2>
                <!-- Step 1 input fields -->
                   
                   <br><div>
                     
   
   
    
  <form  action="/submit" method="post" align="center">
    <input type="radio" id="schoollevel" name="schoollevel" value="HigherSecondary/Intercollege" onclick="showForm('form21')">
    <label for="HigherSecondary/Intercollege">HigherSecondary/Intercollege/ElementaryCollege</label>
    <input type="radio" id="schoollevel" name="schoollevel" value="High" onclick="showForm('form22')">
    <label for="High">High</label>
    <input type="radio" id="schoollevel" name="schoollevel" value="Middle" onclick="showForm('form23')">
    <label for="Middle">Middle</label>
    <input type="radio" id="schoollevel" name="schoollevel" value="Primary/Masjid" onclick="showForm('form24')">
    <label for="Primary/Masjid">Primary/Masjid</label>
    <br>
  </form>
  <div id="form21" style="display: none;">
    <br>
       <table border="2" width="90%" align="center">
 <tr align="center" height="10px"><td >
   
       Post Name</td> <td >Gender</td><td>Status</td></tr>
       <tr> <td>Senior Principal/Principal
       </td>
        <td>
       
                 <input type="radio" name="pgender" value="Male">
      Male
    </label>

    <label>
      <input type="radio" name="pgender" value="Female">
      Female
    </label>
      
        </td> <td> <form>
    
      <input type="radio" name="showHide" value="show" onclick="showDiv('hiddenDiv')"> Filled
    </label>
    <label>
      <input type="radio" name="showHide" value="hide" onclick="hideDiv('hiddenDiv')"> Vacant
    </label>
  </form>
 
  <div id="hiddenDiv">
    <!-- Content of the hidden div goes here -->
   <label>
         <input type="radio" name="pstatus" value="Permanent">
      Permanent
    </label><label>
<input type="radio" name="pstatus" value="Incharge">
      Incharge
    </label>
    <label>
      <input type="radio" name="pstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
  </td></tr>
  
  </div>
  <tr> <td>Senior Subject Specialist
       </td> <td>
       
                 
      Male
    <input type="text"  id="sssm" name="sssl" value="" size="2"> 

    
      Female
      <input type="text"  id="sssfm" name="sssl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="sssf" name="sssl" value="" size="2"> 
 <label>
         <input type="radio" name="ssstatus" value="Permanent">
      Permanent
    </label><label>
<input type="radio" name="ssstatus" value="Incharge">
      Officiating
    </label>
    <label>
      <input type="radio" name="ssstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="sssv" name="sssl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Subject Specialist
       </td> <td>
       
                 
      Male
    <input type="text"  id="ssm" name="ssl" value="" size="2"> 

    
      Female
      <input type="text"  id="ssfm" name="ssl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="ssf" name="ssl" value="" size="2"> 
 <label>
         <input type="radio" name="sbstatus" value="Permanent">
      Permanent
    </label><label>
<input type="radio" name="sbstatus" value="Incharge">
       Officiating
    </label>
    <label>
      <input type="radio" name="sbstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="ssv" name="ssl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Computer Instructor
       </td> <td>
       
                 
      Male
    <input type="text"  id="cim" name="cil" value="" size="2"> 

    
      Female
      <input type="text"  id="cifm" name="cil" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="cif" name="cil" value="" size="2"> 
 <label>
         <input type="radio" name="cistatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="cistatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="civ" name="cil" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Senior Science Teacher
       </td> <td>
       
                 
      Male
    <input type="text"  id="scim" name="scil" value="" size="2"> 

    
      Female
      <input type="text"  id="scifm" name="scil" value="" size="2">
   
      
        </td> <td>
                      
      Filled
    <input type="text"  id="scilf" name="scil" value="" size="2"> 
 <label>
         <input type="radio" name="sststatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="sststatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="scilv" name="scil" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Senior Biology Teacher
       </td> <td>
       
                 
      Male
    <input type="text"  id="sbtm" name="sbtl" value="" size="2"> 

    
      Female
      <input type="text"  id="sbtfm" name="sbtl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="sbtf" name="sbtl" value="" size="2"> 
 <label>
         <input type="radio" name="sbtstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="sbtstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="sbtv" name="sbtl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Senior Gen-Line Teacher
       </td> <td>
       
                 
      Male
    <input type="text"  id="sgtm" name="sgtl" value="" size="2"> 

    
      Female
      <input type="text"  id="sgtfm" name="sgtl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="sgtf" name="sgtl" value="" size="2"> 
 <label>
         <input type="radio" name="sgtstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="sgtstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="sgtv" name="sgtl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
   <tr> <td>Senior Technical Teacher
       </td> <td>
       
                 
      Male
    <input type="text"  id="stecm" name="stecl" value="" size="2"> 

    
      Female
      <input type="text"  id="stecfm" name="stecl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="stecf" name="stecl" value="" size="2"> 
 <label>
         <input type="radio" name="stecstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="stecstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="stecv" name="stecl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Science)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jscm" name="jscl" value="" size="2"> 

    
      Female
      <input type="text"  id="jscfm" name="jscl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jscf" name="agrol" value="" size="2"> 
 <label>
         <input type="radio" name="jscstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jscstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jscv" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Junior)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jtm" name="jtl" value="" size="2"> 

    
      Female
      <input type="text"  id="jtfm" name="jtl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jtf" name="jtl" value="" size="2"> 
 <label>
         <input type="radio" name="jtstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jtstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jtv" name="jtl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Arabic)
       </td> <td>
       
                 
      Male
    <input type="text"  id="arbm" name="arbl" value="" size="2"> 

    
      Female
      <input type="text"  id="arbfm" name="arbl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="arbf" name="arbl" value="" size="2"> 
 <label>
         <input type="radio" name="arbstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="arbstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="arbv" name="arbl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Qari)
       </td> <td>
       
                 
      Male
    <input type="text"  id="qarm" name="qarl" value="" size="2"> 

    
      Female
      <input type="text"  id="qarfm" name="qarl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="qarf" name="qarl" value="" size="2"> 
 <label>
         <input type="radio" name="qarstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="qarstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="qarv" name="qarl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Agrotech)
       </td> <td>
       
                 
      Male
    <input type="text"  id="agrom" name="agrol" value="" size="2"> 

    
      Female
      <input type="text"  id="agrofm" name="agrol" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="agrof" name="agrol" value="" size="2"> 
 <label>
         <input type="radio" name="agrostatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="agrostatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="agrov" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Drawing)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jdrm" name="jdrl" value="" size="2"> 

    
      Female
      <input type="text"  id="jdrfm" name="jdrl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jdrf" name="jdrl" value="" size="2"> 
 <label>
         <input type="radio" name="jdrstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jdrstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jscv" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(PET)
       </td> <td>
       
                 
      Male
    <input type="text"  id="petm" name="petl" value="" size="2"> 

    
      Female
      <input type="text"  id="petfm" name="petl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="petf" name="petl" value="" size="2"> 
 <label>
         <input type="radio" name="petstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="petstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="petv" name="petl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Primary)
       </td> <td>
       
                 
      Male
    <input type="text"  id="primm" name="priml" value="" size="2"> 

    
      Female
      <input type="text"  id="primfm" name="priml" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="primf" name="priml" value="" size="2"> 
 <label>
         <input type="radio" name="primstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="primstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="primv" name="priml" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> 
   <td align="center" colspan="3" >
   <h5>Non-Teaching Staff</h5>
    
                </tr>
                <tr> <td>Head Clerk
       </td> <td>
       
                 
      Male
    <input type="text"  id="hclm" name="hcll" value="" size="2"> 

    
      Female
      <input type="text"  id="hclfm" name="hcll" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="hclf" name="hcll" value="" size="2"> 
 <label>
         <input type="radio" name="hclstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="hclstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="hclv" name="hcll" value="" size="2">
   
      
        </td>
  </tr>
   <tr> <td>Senior Clerk
       </td> <td>
       
                 
      Male
    <input type="text"  id="sclm" name="hcll" value="" size="2"> 

    
      Female
      <input type="text"  id="sclfm" name="hcll" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="sclf" name="hcll" value="" size="2"> 
 <label>
         <input type="radio" name="sclstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="sclstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="sclv" name="hcll" value="" size="2">
   
      
        </td>
  </tr>
  <tr> <td>Junior Clerk
       </td> <td>
       
                 
      Male
    <input type="text"  id="jclm" name="clrl" value="" size="2"> 

    
      Female
      <input type="text"  id="jclfm" name="clrl" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="jclf" name="clrl" value="" size="2"> 
 <label>
         <input type="radio" name="jclstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jclstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jclv" name="clrl" value="" size="2">
   
      
        </td>
  </tr>
  <tr> <td>Librarian
       </td> <td>
       
                 
      Male
    <input type="text"  id="librm" name="libr" value="" size="2"> 

    
      Female
      <input type="text"  id="librfm" name="libr" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="librf" name="libr" value="" size="2"> 
 <label>
         <input type="radio" name="librstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="librstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="librv" name="libr" value="" size="2">
   
      
        </td>
  
  
 </tr>
                <tr> <td>Computer Lab Assistant
       </td> <td>
       
                 
      Male
    <input type="text"  id="cassm" name="cassl" value="" size="2"> 

    
      Female
      <input type="text"  id="cassfm" name="cassl" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="cassf" name="cassl" value="" size="2"> 
 <label>
         <input type="radio" name="cassstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="cassstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="cassv" name="cassl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Laboratory Attendent
       </td> <td>
       
                 
      Male
    <input type="text"  id="lattm" name="lattl" value="" size="2"> 

    
      Female
      <input type="text"  id="lattfm" name="lattl" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="lattf" name="lattl" value="" size="2"> 
 <label>
         <input type="radio" name="lattstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="lattstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="lattv" name="lattl" value="" size="2">
   
      
        </td>
  
  
 </tr>
                <tr> <td>Naib Qasid
       </td> <td>
       
                 
      Male
    <input type="text"  id="nqm" name="nql" value="" size="2"> 

    
      Female
      <input type="text"  id="nqfm" name="nql" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="nqf" name="nql" value="" size="2"> 
 <label>
         <input type="radio" name="nqstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="nqstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="nqv" name="nql" value="" size="2">
   
      
        </td>
  
   </tr>
  <tr> <td>Chowkidar
       </td> <td>
       
                 
      Male
    <input type="text"  id="chowkidarm" name="chowkidar" value="" size="2"> 

    
      Female
      <input type="text"  id="chowkidarfm" name="chowkidar" value=" " size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="chowkidarf" name="nql" value="" size="2"> 
 <label>
         <input type="radio"  name="chstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio"  name="chstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="chowkidarva" name="chowkidarva" value="" size="2">
   
      
        </td>
  </tr>
  </table> 
        <script>
    function showDiv(hiddenDiv) {
      document.getElementById('hiddenDiv').style.display = 'block';
    }

    function hideDiv(hiddenDiv) {
      document.getElementById('hiddenDiv').style.display = 'none';
    }
  </script>              
       </div>

  <div id="form22" style="display: none;">
 
 <table border="2" width="90%" align="center">
 <tr align="center" height="10px"><td >
   
       Post Name</td> <td >Gender</td><td>Status</td></tr>
       <tr> <td>Headmaster/Senior Headmaster/Principal
       </td>
        <td>
       
                 <input type="radio" name="pgender" value="Male">
      Male
    </label>

    <label>
      <input type="radio" name="pgender" value="Female">
      Female
    </label>
      
        </td> <td> <form>
    
      <input type="radio" name="showHide1" value="show" onclick="showDiv1('hiddenDiv1')"> Filled
    </label>
    <label>
      <input type="radio" name="showHide1" value="hide" onclick="hideDiv1('hiddenDiv1')"> Vacant
    </label>
  </form>
 
  <div id="hiddenDiv1">
    <!-- Content of the hidden div goes here -->
   <label>
         <input type="radio" name="pstatus" value="Permanent">
      Permanent
    </label><label>
<input type="radio" name="pstatus" value="Incharge">
      Incharge
    </label>
    <label>
      <input type="radio" name="pstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
  </td></tr>
  
  </div>
   <tr> <td>Computer Instructor
       </td> <td>
       
                 
      Male
    <input type="text"  id="cim" name="cil" value="" size="2"> 

    
      Female
      <input type="text"  id="cifm" name="cil" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="cif" name="cil" value="" size="2"> 
 <label>
         <input type="radio" name="cistatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="cistatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="civ" name="cil" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Senior Science Teacher
       </td> <td>
       
                 
      Male
    <input type="text"  id="scim" name="scil" value="" size="2"> 

    
      Female
      <input type="text"  id="scifm" name="scil" value="" size="2">
   
      
        </td> <td>
                      
      Filled
    <input type="text"  id="scilf" name="scil" value="" size="2"> 
 <label>
         <input type="radio" name="sststatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="sststatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="scilv" name="scil" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Senior Biology Teacher
       </td> <td>
       
                 
      Male
    <input type="text"  id="sbtm" name="sbtl" value="" size="2"> 

    
      Female
      <input type="text"  id="sbtfm" name="sbtl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="sbtf" name="sbtl" value="" size="2"> 
 <label>
         <input type="radio" name="sbtstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="sbtstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="sbtv" name="sbtl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Senior Gen-Line Teacher
       </td> <td>
       
                 
      Male
    <input type="text"  id="sgtm" name="sgtl" value="" size="2"> 

    
      Female
      <input type="text"  id="sgtfm" name="sgtl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="sgtf" name="sgtl" value="" size="2"> 
 <label>
         <input type="radio" name="sgtstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="sgtstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="sgtv" name="sgtl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
   <tr> <td>Senior Technical Teacher
       </td> <td>
       
                 
      Male
    <input type="text"  id="stecm" name="stecl" value="" size="2"> 

    
      Female
      <input type="text"  id="stecfm" name="stecl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="stecf" name="stecl" value="" size="2"> 
 <label>
         <input type="radio" name="stecstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="stecstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="stecv" name="stecl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Science)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jscm" name="jscl" value="" size="2"> 

    
      Female
      <input type="text"  id="jscfm" name="jscl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jscf" name="agrol" value="" size="2"> 
 <label>
         <input type="radio" name="jscstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jscstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jscv" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Junior)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jtm" name="jtl" value="" size="2"> 

    
      Female
      <input type="text"  id="jtfm" name="jtl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jtf" name="jtl" value="" size="2"> 
 <label>
         <input type="radio" name="jtstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jtstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jtv" name="jtl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Arabic)
       </td> <td>
       
                 
      Male
    <input type="text"  id="arbm" name="arbl" value="" size="2"> 

    
      Female
      <input type="text"  id="arbfm" name="arbl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="arbf" name="arbl" value="" size="2"> 
 <label>
         <input type="radio" name="arbstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="arbstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="arbv" name="arbl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Qari)
       </td> <td>
       
                 
      Male
    <input type="text"  id="qarm" name="qarl" value="" size="2"> 

    
      Female
      <input type="text"  id="qarfm" name="qarl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="qarf" name="qarl" value="" size="2"> 
 <label>
         <input type="radio" name="qarstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="qarstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="qarv" name="qarl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Agrotech)
       </td> <td>
       
                 
      Male
    <input type="text"  id="agrom" name="agrol" value="" size="2"> 

    
      Female
      <input type="text"  id="agrofm" name="agrol" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="agrof" name="agrol" value="" size="2"> 
 <label>
         <input type="radio" name="agrostatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="agrostatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="agrov" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Drawing)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jdrm" name="jdrl" value="" size="2"> 

    
      Female
      <input type="text"  id="jdrfm" name="jdrl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jdrf" name="jdrl" value="" size="2"> 
 <label>
         <input type="radio" name="jdrstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jdrstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jscv" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(PET)
       </td> <td>
       
                 
      Male
    <input type="text"  id="petm" name="petl" value="" size="2"> 

    
      Female
      <input type="text"  id="petfm" name="petl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="petf" name="petl" value="" size="2"> 
 <label>
         <input type="radio" name="petstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="petstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="petv" name="petl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Primary)
       </td> <td>
       
                 
      Male
    <input type="text"  id="primm" name="priml" value="" size="2"> 

    
      Female
      <input type="text"  id="primfm" name="priml" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="primf" name="priml" value="" size="2"> 
 <label>
         <input type="radio" name="primstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="primstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="primv" name="priml" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> 
   <td align="center" colspan="3" >
   <h5>Non-Teaching Staff</h5>
    
                </tr>
                 <tr> <td>Senior Clerk
       </td> <td>
       
                 
      Male
    <input type="text"  id="sclm" name="hcll" value="" size="2"> 

    
      Female
      <input type="text"  id="sclfm" name="hcll" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="sclf" name="hcll" value="" size="2"> 
 <label>
         <input type="radio" name="sclstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="sclstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="sclv" name="hcll" value="" size="2">
   
      
        </td>
  </tr>
  <tr> <td>Junior Clerk
       </td> <td>
       
                 
      Male
    <input type="text"  id="jclm" name="clrl" value="" size="2"> 

    
      Female
      <input type="text"  id="jclfm" name="clrl" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="jclf" name="clrl" value="" size="2"> 
 <label>
         <input type="radio" name="jclstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jclstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jclv" name="clrl" value="" size="2">
   
      
        </td>
  </tr>
  <tr> <td>Computer Lab Assistant
       </td> <td>
       
                 
      Male
    <input type="text"  id="cassm" name="cassl" value="" size="2"> 

    
      Female
      <input type="text"  id="cassfm" name="cassl" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="cassf" name="cassl" value="" size="2"> 
 <label>
         <input type="radio" name="cassstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="cassstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="cassv" name="cassl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Laboratory Attendent
       </td> <td>
       
                 
      Male
    <input type="text"  id="lattm" name="lattl" value="" size="2"> 

    
      Female
      <input type="text"  id="lattfm" name="lattl" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="lattf" name="lattl" value="" size="2"> 
 <label>
         <input type="radio" name="lattstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="lattstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="lattv" name="lattl" value="" size="2">
   
      
        </td>
  
  
 </tr>
                <tr> <td>Naib Qasid
       </td> <td>
       
                 
      Male
    <input type="text"  id="nqm" name="nql" value="" size="2"> 

    
      Female
      <input type="text"  id="nqfm" name="nql" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="nqf" name="nql" value="" size="2"> 
 <label>
         <input type="radio" name="nqstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="nqstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="nqv" name="nql" value="" size="2">
   
      
        </td>
  
   </tr>
  <tr> <td>Chowkidar
       </td> <td>
       
                 
      Male
    <input type="text"  id="chowkidarm" name="chowkidar" value="" size="2"> 

    
      Female
      <input type="text"  id="chowkidarfm" name="chowkidar" value=" " size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="chowkidarf" name="nql" value="" size="2"> 
 <label>
         <input type="radio"  name="chstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio"  name="chstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="chowkidarva" name="chowkidarva" value="" size="2">
   
      
        </td>
  </tr>
  </table> 
        <script>
    function showDiv1(hiddenDiv1) {
      document.getElementById('hiddenDiv1').style.display = 'block';
    }

    function hideDiv1(hiddenDiv1) {
      document.getElementById('hiddenDiv1').style.display = 'none';
    }
  </script>              
      
   <br>
                    
       </div><div id="form23" style="display: none;">
 
           <table border="2" width="90%" align="center">
 <tr align="center" height="10px"><td >
   
       Post Name</td> <td >Gender</td><td>Status</td></tr>
       <tr> <td>Senior Teacher(Head)
       </td>
        <td>
       
                 <input type="radio" name="pgender" value="Male">
      Male
    </label>

    <label>
      <input type="radio" name="pgender" value="Female">
      Female
    </label>
      
        </td> <td> <form>
    
      <input type="radio" name="showHide2" value="show" onclick="showDiv2('hiddenDiv2')"> Filled
    </label>
    <label>
      <input type="radio" name="showHide2" value="hide" onclick="hideDiv2('hiddenDiv2')"> Vacant
    </label>
  </form>
 
  <div id="hiddenDiv2">
    <!-- Content of the hidden div goes here -->
   <label>
         <input type="radio" name="pstatus" value="Permanent">
      Permanent
    </label><label>
<input type="radio" name="pstatus" value="Incharge">
      Incharge
    </label>
    <label>
      <input type="radio" name="pstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
  </td></tr>
  
  </div>
   <tr> <td> Junior Computer Instructor
       </td> <td>
       
                 
      Male
    <input type="text"  id="cim" name="cil" value="" size="2"> 

    
      Female
      <input type="text"  id="cifm" name="cil" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="cif" name="cil" value="" size="2"> 
 <label>
         <input type="radio" name="cistatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="cistatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="civ" name="cil" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
    
   </tr>
  <tr> <td>Elementary Teacher(Science)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jscm" name="jscl" value="" size="2"> 

    
      Female
      <input type="text"  id="jscfm" name="jscl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jscf" name="agrol" value="" size="2"> 
 <label>
         <input type="radio" name="jscstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jscstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jscv" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Junior)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jtm" name="jtl" value="" size="2"> 

    
      Female
      <input type="text"  id="jtfm" name="jtl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jtf" name="jtl" value="" size="2"> 
 <label>
         <input type="radio" name="jtstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jtstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jtv" name="jtl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Arabic)
       </td> <td>
       
                 
      Male
    <input type="text"  id="arbm" name="arbl" value="" size="2"> 

    
      Female
      <input type="text"  id="arbfm" name="arbl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="arbf" name="arbl" value="" size="2"> 
 <label>
         <input type="radio" name="arbstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="arbstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="arbv" name="arbl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Qari)
       </td> <td>
       
                 
      Male
    <input type="text"  id="qarm" name="qarl" value="" size="2"> 

    
      Female
      <input type="text"  id="qarfm" name="qarl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="qarf" name="qarl" value="" size="2"> 
 <label>
         <input type="radio" name="qarstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="qarstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="qarv" name="qarl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Agrotech)
       </td> <td>
       
                 
      Male
    <input type="text"  id="agrom" name="agrol" value="" size="2"> 

    
      Female
      <input type="text"  id="agrofm" name="agrol" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="agrof" name="agrol" value="" size="2"> 
 <label>
         <input type="radio" name="agrostatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="agrostatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="agrov" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Drawing)
       </td> <td>
       
                 
      Male
    <input type="text"  id="jdrm" name="jdrl" value="" size="2"> 

    
      Female
      <input type="text"  id="jdrfm" name="jdrl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="jdrf" name="jdrl" value="" size="2"> 
 <label>
         <input type="radio" name="jdrstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="jdrstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="jscv" name="agrol" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(PET)
       </td> <td>
       
                 
      Male
    <input type="text"  id="petm" name="petl" value="" size="2"> 

    
      Female
      <input type="text"  id="petfm" name="petl" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="petf" name="petl" value="" size="2"> 
 <label>
         <input type="radio" name="petstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="petstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="petv" name="petl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Elementary Teacher(Primary)
       </td> <td>
       
                 
      Male
    <input type="text"  id="primm" name="priml" value="" size="2"> 

    
      Female
      <input type="text"  id="primfm" name="priml" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="primf" name="priml" value="" size="2"> 
 <label>
         <input type="radio" name="primstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="primstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="primv" name="priml" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> 
   <td align="center" colspan="3" >
   <h5>Non-Teaching Staff</h5>
    
                </tr>
                 
    <tr> <td>Computer Lab Assistant
       </td> <td>
       
                 
      Male
    <input type="text"  id="cassm" name="cassl" value="" size="2"> 

    
      Female
      <input type="text"  id="cassfm" name="cassl" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="cassf" name="cassl" value="" size="2"> 
 <label>
         <input type="radio" name="cassstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="cassstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="cassv" name="cassl" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
  <tr> <td>Naib Qasid
       </td> <td>
       
                 
      Male
    <input type="text"  id="nqm" name="nql" value="" size="2"> 

    
      Female
      <input type="text"  id="nqfm" name="nql" value="" size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="nqf" name="nql" value="" size="2"> 
 <label>
         <input type="radio" name="nqstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="nqstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="nqv" name="nql" value="" size="2">
   
      
        </td>
  
   </tr>
  <tr> <td>Chowkidar
       </td> <td>
       
                 
      Male
    <input type="text"  id="chowkidarm" name="chowkidar" value="" size="2"> 

    
      Female
      <input type="text"  id="chowkidarfm" name="chowkidar" value=" " size="2">
   
      
        </td> 
        <td>         
      Filled
    <input type="text"  id="chowkidarf" name="nql" value="" size="2"> 
 <label>
         <input type="radio"  name="chstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio"  name="chstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="chowkidarva" name="chowkidarva" value="" size="2">
   
      
        </td>
  </tr>
  </table> 
        <script>
    function showDiv2(hiddenDiv2) {
      document.getElementById('hiddenDiv2').style.display = 'block';
    }

    function hideDiv2(hiddenDiv2) {
      document.getElementById('hiddenDiv2').style.display = 'none';
    }
  </script>              
      
   <br>
        
       </div><div id="form24" style="display: none;">
 
   <br>
   
           <table border="2" width="90%" align="center">
 <tr align="center" height="10px"><td >
   
       Post Name</td> <td >Gender</td><td>Status</td></tr>
       
   
       <tr> <td>Elementary Teacher(Primary)
       </td> <td>
       
                 
      Male
    <input type="text"  id="primm" name="priml" value="" size="2"> 

    
      Female
      <input type="text"  id="primfm" name="priml" value="" size="2">
   
      
        </td> <td>
       
                 
      Filled
    <input type="text"  id="primf" name="priml" value="" size="2"> 
 <label>
         <input type="radio" name="primstatus" value="Permanent">
      Permanent
    </label>
    <label>
      <input type="radio" name="primstatus" value="Contract/Adhoc">
      Contract/ Adhoc
    </label>
    <br>
      Vacant
      <input type="text"  id="primv" name="priml" value="" size="2">
   
      
        </td>
  
  
  </td></tr>
   </table> 
                     
      
   <br>
                    
       </div>
     

  <script>
    function showForm(formId) {
      // Hide all forms
      const forms = document.querySelectorAll('div[id^=form]');
      for (const form of forms) {
        form.style.display = 'none';
      }

      // Show the selected form
      const selectedForm = document.getElementById(formId);
      selectedForm.style.display = 'block';
    }
  </script>
  </div>
   
         </section>          
   
     <br>
	
<!--
  <fieldset align='center' style="width:auto; margin:0 auto;">
  <button name="next" type="next" id="next" class="button btn-navigate-form-step">Next</button>
-->
	 
  
	
    
  <br> <br>
	  <footer>
	    <div class="row">
	      <div class="col-lg-4"><img src="images/logo.png" width="104" height="104" alt=""/>&nbsp;</div>
	      <div class="col-lg-6"><br><br><br>Copyright © 2024 - All Rights Reserved </div>
        </div>
		  <br> <br>
	  </footer>
    </div>
  </div>
 
   
 
 <style>
input:valid{
	 color:green;}
	 input:invalid{
	 color:red;}
	 </style>
	 
  </body>
</html>