<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Information Form</title>
    <style>
       
        .form-group-students {
            display: inline;
            align-items: center;
            margin-bottom: 15px;
        }
        .form-group-students label {
            margin-right: 10px;
            width: 150px;
            text-align: right;
        }
        .form-group-students input, .form-group-students select {
            flex: 1;
            padding: 8px;
            box-sizing: border-box;
        }
        .form-group-students div {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }
        .form-group-students div input {
            width: 80px;
        }
        .form-container-students {
            margin-bottom: 20px;
			width: 70%;
        }
        .class-container-students {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
            width: 70%;
            display: flex;
            flex-wrap: wrap;
        }
        .class-container-students h2 {
            flex-basis: 100%;
            margin-top: 0;
        }
        .class-container-students .form-group-students {
            flex-basis: 100%;
            display: flex;
            flex-wrap: wrap;
			
        }
        .class-container-students .form-group-students > div {
            flex: 1;
            min-width: 200px;
			
        }
        .add-class-btn-students, .remove-class-btn-students {
            margin: 10px 0;
			background-color: #007bff;
    		width: 20%;
    		padding: 10px;
    		border-radius: 4px;
        }
        .remove-class-btn-students {
    		background-color: #dc3545;
            cursor: pointer;
			width: 20%;
    		padding: 10px;
    		border-radius: 4px;
        }
		
    </style>
</head>
<body>

    <div id="formContainer88" align="center">
        <div class="form-group-students" align="center">
            <label for="emisCode">EMIS Code:</label>
            <input type="text" id="emisCode" name="emisCode"  size="80" required>
        </div>
        <div class="class-container-students">
            <h2>0</h2>
            <div class="form-group-students">
                <label for="className1">Class Name:</label>
                <select id="className1" name="Class_name[]" required>
                    <option value="">Select Class...</option>
                    <option value="Nursery">Nursery</option>
                    <option value="Play Group">Play Group</option>
                    <option value="Prep">Prep</option>
                    <option value="ONE">One</option>
                    <option value="Two">Two</option>
                    <option value="Three">Three</option>
                    <option value="4th">4th</option>
                    <option value="5th">5th</option>
                    <option value="6th">6th</option>
                    <option value="7th">7th</option>
                     <option value="8th">8th</option>
                      <option value="9th">9th</option>
                       <option value="10th">10th</option>
                        <option value="First Year">Fisrt Year</option>
                         <option value="Second Year">Second Year</option>
                         
                </select>
            </div>
            <div class="form-group-students">
                <label>Total Students:</label>
                <div>
                    <label for="totalMale1">Male:</label>
                    <input type="number" id="totalMale1" name="totalMale[]" option value="0">
                </div>
                <div>
                    <label for="totalFemale1">Female:</label>
                    <input type="number" id="totalFemale1" name="totalFemale[]"option value="0">
                </div>
            </div>
            <div class="form-group-students">
                <label>Repeating Students:</label>
                <div>
                    <label for="repeatingMale1">Male:</label>
                    <input type="number" id="repeatingMale1" name="repeatingMale[]" option value="0">
                </div>
                <div>
                    <label for="repeatingFemale1">Female:</label>
                    <input type="number" id="repeatingFemale1" name="repeatingFemale[]" option value="0">
                </div>
            </div>
            <div class="form-group-students">
                <label>Orphan Students:</label>
                <div>
                    <label for="orphanMale1">Male:</label>
                    <input type="number" id="orphanMale1" name="orphanMale[]" option value="0">
                </div>
                <div>
                    <label for="orphanFemale1">Female:</label>
                    <input type="number" id="orphanFemale1" name="orphanFemale[]" option value="0">
                </div>
            </div>
            <div class="form-group-students">
                <label>Special Students:</label>
                <div>
                    <label for="specialMale1">Male:</label>
                    <input type="number" id="specialMale1" name="specialMale[]" option value="0">
                </div>
                <div>
                    <label for="specialFemale1">Female:</label>
                    <input type="number" id="specialFemale1" name="specialFemale[]" option value="0">
                </div>
            </div>
            <div class="form-group-students">
                <label>Scholarship Holders:</label>
                <div>
                    <label for="scholarMale1">Male:</label>
                    <input type="number" id="scholarMale1" name="scholarMale[]" option value="0">
                </div>
                <div>
                    <label for="scholarFemale1">Female:</label>
                    <input type="number" id="scholarFemale1" name="scholarFemale[]" option value="0">
                </div>
            </div>
            <button class="remove-class-btn-students" onclick="removeClassstudents(this)">Remove Class</button>
        </div>
    </div>
<div align="center">
    <button class="add-class-btn-students" onclick="addClassstudents()" >Add Class</button>
</div>
    <script>
        let classCount = 0;

        function addClassstudents() {
            classCount++;
            const formContainer88 = document.getElementById('formContainer88');

            const classContainer88 = document.createElement('div');
            classContainer88.className = 'class-container-students';
            classContainer88.innerHTML = `
                <h2>${classCount}</h2>
                <div class="form-group-students">
                    <label for="className${classCount}">Class Name:</label>
                     <select id="className1" name="Class_name[]" required>
                    <option value="">Select Class...</option>
                    <option value="Nursery">Nursery</option>
                    <option value="Play Group">Play Group</option>
                    <option value="Prep">Prep</option>
                    <option value="ONE">One</option>
                    <option value="Two">Two</option>
                    <option value="Three">Three</option>
                    <option value="4th">4th</option>
                    <option value="5th">5th</option>
                    <option value="6th">6th</option>
                    <option value="7th">7th</option>
                     <option value="8th">8th</option>
                      <option value="9th">9th</option>
                       <option value="10th">10th</option>
                        <option value="First Year">Fisrt Year</option>
                         <option value="Second Year">Second Year</option>
                         
                </select>
                </div>
                <div class="form-group-students">
                    <label>Total Students:</label>
                    <div>
                        <label for="totalMale${classCount}">Male:</label>
                        <input type="number" id="totalMale${classCount}" name="totalMale[]" option value="0">
                    </div>
                    <div>
                        <label for="totalFemale${classCount}">Female:</label>
                        <input type="number" id="totalFemale${classCount}" name="totalFemale[]" option value="0">
                    </div>
                </div>
                <div class="form-group-students">
                    <label>Repeating Students:</label>
                    <div>
                        <label for="repeatingMale${classCount}">Male:</label>
                        <input type="number" id="repeatingMale${classCount}" name="repeatingMale[]" option value="0">
                    </div>
                    <div>
                        <label for="repeatingFemale${classCount}">Female:</label>
                        <input type="number" id="repeatingFemale${classCount}" name="repeatingFemale[]" option value="0">
                    </div>
                </div>
                <div class="form-group-students">
                    <label>Orphan Students:</label>
                    <div>
                        <label for="orphanMale${classCount}">Male:</label>
                        <input type="number" id="orphanMale${classCount}" name="orphanMale[]" option value="0">
                    </div>
                    <div>
                        <label for="orphanFemale${classCount}">Female:</label>
                        <input type="number" id="orphanFemale${classCount}" name="orphanFemale[]" option value="0">
                    </div>
                </div>
                <div class="form-group-students">
                    <label>Special Students:</label>
                    <div>
                        <label for="specialMale${classCount}">Male:</label>
                        <input type="number" id="specialMale${classCount}" name="specialMale[]" option value="0">
                    </div>
                    <div>
                        <label for="specialFemale${classCount}">Female:</label>
                        <input type="number" id="specialFemale${classCount}" name="specialFemale[]" option value="0">
                    </div>
                </div>
                <div class="form-group-students">
                    <label>Scholarship Holders:</label>
                    <div>
                        <label for="scholarMale${classCount}">Male:</label>
                        <input type="number" id="scholarMale${classCount}" name="scholarMale[]" option value="0">
                    </div>
                    <div>
                        <label for="scholarFemale${classCount}">Female:</label>
                        <input type="number" id="scholarFemale${classCount}" name="scholarFemale[]" option value="0">
                    </div>
                </div>
                <button class="remove-class-btn-students" onclick="removeClassstudents(this)">Remove Class</button>
            `;
            formContainer88.appendChild(classContainer88);
        }

        function removeClassstudents(button) {
            const classContainer88 = button.closest('.class-container-students');
            classContainer88.remove();
            // Update classCount and class number if necessary
            classCount--;
            updateClassNumbers();
        }

        function updateClassNumbers() {
            const classContainers88 = document.querySelectorAll('.class-container-students');
            classContainers88.forEach((container, index) => {
                container.querySelector('h2').textContent = index + 1;
                const inputs = container.querySelectorAll('input, select');
                inputs.forEach(input => {
                    const id = input.getAttribute('id');
                    if (id) {
                        const newId = id.replace(/\d+$/, index + 1);
                        input.setAttribute('id', newId);
                        input.setAttribute('name', input.getAttribute('name').replace(/\d+$/, index + 1));
                    }
                });
            });
        }
    </script>
</body>
</html>
