<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Form</title>
    <style>
     
.form-container-posts {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}
formposts {
    display: flex;
    flex-direction: column;
}
.form-group-posts {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
.form-group-posts label {
    margin-bottom: 5px;
}
.form-group-posts input,
.form-group-posts select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.post-group-posts {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}
.post-group-posts .form-group-posts {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.post-group-posts label {
    margin-bottom: 5px;
    text-align: left;
}
.post-group-posts input,
.post-group-posts select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.form-group-posts button {
    margin-top: 10px;
    padding: 10px 20px;
    color: #fff;
    border: none;
    cursor: pointer;
}
.add-more-posts {
    background-color: #007bff;
    width: 30%;
    padding: 10px;
    border-radius: 4px;
}
.removeposts {
    background-color: #dc3545;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}
.button-container-posts {
    text-align: center;
}
.button-container-posts button {
    margin: 10px;
}
   </style>
</head>
<body>
<div align="center">
    <div class="form-container-posts" >
            <div class="form-group-posts">
                <label for="emisCode">EMIS Code:</label>
                <input type="text" id="emisCode" name="emis_code[]" required>
            </div>
            <div id="fieldsContainerposts">
                <div class="post-group-posts">
                    <div class="form-group-posts">
                        <label for="postName">Post Name:</label>
                        <select id="postName" name="post_name[]" required>
                             <option value="">Select Designation...</option>
                        <option value="Senior Principal">Senior Principal</option>
                        <option value="Principal">Principal</option>
                        <option value="Senior Headmaster">Senior Headmaster</option>
                         <option value="Senior Headmaster">Headmaster</option>
                        <option value="Senior Headmistress">Senior Headmistress</option>
                        <option value="Headmistress"> Headmistress</option>
                         <option value="Senior Subject Specialist">Senior Subject Specialist</option>
                        <option value="Subject Specialist">Subject Specialist</option>
                        <option value="Computer Instructor">Computer Instructor</option>
                         <option value="Senior Teacher general line">Senior Teacher(general line)</option>
                        <option value="Senior Teacher Science">Senior Teacher(Science)</option>
                        <option value="Senior Teacher Biology"> Senior Teacher (Biology)</option>
                      <option value="Senior Technical Teacher">Senior Technical Teacher</option>
                      <option value="DPE">DPE</option>
                      <option value="Librarian">Librarian</option>
                      <option value="Junior Computer Teacher ">Junior Computer Teacher </option>
                      <option value="Elementary Teacher Junior">Elementary Teacher (Junior)</option>
                      <option value="Elementary Teacher Science">Elementary Teacher (Science)</option>
                      <option value="Elementary Teacher Qari">Elementary Teacher (Qari)</option>
                      <option value="Elementary Teacher Arabic">Elementary Teacher (Arabic)</option>
                      <option value="Elementary Teacher PET">PET</option>
                      <option value="Elementary Teacher Drawing">Elementary Teacher (Drawing)</option>
                      <option value="Elementary Teacher Agrotech">Elementary Teacher (Agrotech)</option>
                      <option value="Elementary Teacher Teachnical">Elementary Teacher (Teachnical)</option>
                      <option value="Elementary Teacher Primary">Elementary Teacher (Primary)</option>
                      <option value="Library Assistant">Library Assistant</option>
                      <option value="Moallam Ul Quran">Moallam Ul Quran</option>
					<option value="Head Clerk ">Head Clerk</option>
                    <option value="Senior Clerk ">Senior Clerk</option>
                    <option value="Junior Clerk ">Junior Clerk</option>
                    <option value="Computer Lab Assistant">Computer Lab Assistant</option>
                    <option value="Bandmaster">Bandmaster</option>
                    <option value="Laboratory Attendant">Laboratory Attendant</option>
                    <option value="Naib Qasid">Naib Qasid</option>
                    <option value="Water Carrier">Water Carrier</option>
                    <option value="Sweaper">Sweaper</option>
                    <option value="Chowkidar">Chowkidar</option>
                    <option value="Mali/Malan">Mali/Malan</option>
                    <option value="Cook">Cook</option>
                    <option value="Other">Others</option>

                            <!-- Add more options as needed -->
                        </select>
                    </div>
                    <div class="form-group-posts">
                        <label for="male">Male:</label>
                        <input type="number" id="male" name="male[]" >
                    </div>
                    <div class="form-group-posts">
                        <label for="female">Female:</label>
                        <input type="number" id="female" name="female[]" >
                    </div>
                    <div class="form-group-posts">
                        <label for="postAsPerBudget">Post as per Budget:</label>
                        <input type="number" id="postAsPerBudget" name="post_as_per_budget[]" >
                    </div>
                    <div class="form-group-posts">
                        <label for="filledPost">Filled Post:</label>
                        <input type="number" id="filledPost" name="filled_post[]" >
                    </div>
                    <div class="form-group-posts">
                        <label for="vacantPost">Vacant Post:</label>
                        <input type="number" id="vacantPost" name="vacant_post[]" >
                    </div>              

                    <button type="button" class="removeposts" onclick="removeFields99(this)">Remove</button>
           </div> </div>  
                        <div class="button-container-posts">

            <button type="button" class="add-more-posts" onclick="addFields99()">Add More</button>
                    </div>

    </div>

    <script>
        function addFields99() {
            const container99 = document.getElementById('fieldsContainerposts');
            const postGroup99 = document.createElement('div');
            postGroup99.className = 'post-group-posts';

            postGroup99.innerHTML = `
                <div class="form-group-posts">
                    <label for="postName">Post Name:</label>
                    <select id="postName" name="post_name[]" required>
                        <option value="">Select Designation...</option>
                        <option value="Senior Principal">Senior Principal</option>
                        <option value="Principal">Principal</option>
                        <option value="Senior Headmaster">Senior Headmaster</option>
                         <option value="Senior Headmaster">Headmaster</option>
                        <option value="Senior Headmistress">Senior Headmistress</option>
                        <option value="Headmistress"> Headmistress</option>
                         <option value="Senior Subject Specialist">Senior Subject Specialist</option>
                        <option value="Subject Specialist">Subject Specialist</option>
                        <option value="Computer Instructor">Computer Instructor</option>
                         <option value="Senior Teacher general line">Senior Teacher(general line)</option>
                        <option value="Senior Teacher Science">Senior Teacher(Science)</option>
                        <option value="Senior Teacher Biology"> Senior Teacher (Biology)</option>
                      <option value="Senior Technical Teacher">Senior Technical Teacher</option>
                      <option value="DPE">DPE</option>
                      <option value="Librarian">Librarian</option>
                      <option value="Junior Computer Teacher ">Junior Computer Teacher </option>
                      <option value="Elementary Teacher Junior">Elementary Teacher (Junior)</option>
                      <option value="Elementary Teacher Science">Elementary Teacher (Science)</option>
                      <option value="Elementary Teacher Qari">Elementary Teacher (Qari)</option>
                      <option value="Elementary Teacher Arabic">Elementary Teacher (Arabic)</option>
                      <option value="Elementary Teacher PET">PET</option>
                      <option value="Elementary Teacher Drawing">Elementary Teacher (Drawing)</option>
                      <option value="Elementary Teacher Agrotech">Elementary Teacher (Agrotech)</option>
                      <option value="Elementary Teacher Teachnical">Elementary Teacher (Teachnical)</option>
                      <option value="Elementary Teacher Primary">Elementary Teacher (Primary)</option>
                      <option value="Library Assistant">Library Assistant</option>
                      <option value="Moallam Ul Quran">Moallam Ul Quran</option>
					<option value="Head Clerk ">Head Clerk</option>
                    <option value="Senior Clerk ">Senior Clerk</option>
                    <option value="Junior Clerk ">Junior Clerk</option>
                    <option value="Computer Lab Assistant">Computer Lab Assistant</option>
                    <option value="Bandmaster">Bandmaster</option>
                    <option value="Laboratory Attendant">Laboratory Attendant</option>
                    <option value="Naib Qasid">Naib Qasid</option>
                    <option value="Water Carrier">Water Carrier</option>
                    <option value="Sweaper">Sweaper</option>
                    <option value="Chowkidar">Chowkidar</option>
                    <option value="Mali/Malan">Mali/Malan</option>
                    <option value="Cook">Cook</option>
					<option value="Other">Others</option>

                            <!-- Add more options as needed -->
                        </select>
                </div>
                <div class="form-group-posts">
                    <label for="male">Male:</label>
                    <input type="number" id="male" name="male[]" required>
                </div>
                <div class="form-group-posts">
                    <label for="female">Female:</label>
                    <input type="number" id="female" name="female[]" required>
                </div>
                <div class="form-group-posts">
                    <label for="postAsPerBudget">Post as per Budget:</label>
                    <input type="number" id="postAsPerBudget" name="post_as_per_budget[]" required>
                </div>
                <div class="form-group-posts">
                    <label for="filledPost">Filled Post:</label>
                    <input type="number" id="filledPost" name="filled_post[]" required>
                </div>
                <div class="form-group-posts">
                    <label for="vacantPost">Vacant Post:</label>
                    <input type="number" id="vacantPost" name="vacant_post[]" required>
                </div>
                <button type="button" class="removeposts" onclick="removeFields99(this)">Remove</button>
            `;

            container99.appendChild(postGroup99);
        }

        function removeFields99(button) {
            const postGroup99 = button.parentNode;
            postGroup99.parentNode.removeChild(postGroup99);
        }
    </script>
    </div>
</body>
</html>
