Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic HTML Table</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentRow = null;
            $('#insertRowBtn').click(function() {
                var newRow = '<tr>' +
                    '<td><input type="text" class="rollNo"></td>' +
                    '<td><input type="text" class="name"></td>' +
                    '<td><input type="text" class="gender"></td>' +
                    '<td><input type="text" class="age"></td>' +
                    '</tr>';
                $('table tbody').append(newRow);
            });
            $(document).on('focus', 'input', function() {
                currentRow = $(this).closest('tr');
            });
            $('#deleteRowBtn').click(function() {
                if (currentRow) {
                    currentRow.remove();
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>RollNo.</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" class="rollNo"></td>
                <td><input type="text" class="name"></td>
                <td><input type="text" class="gender"></td>
                <td><input type="text" class="age"></td>
            </tr>
            <tr>
                <td><input type="text" class="rollNo"></td>
                <td><input type="text" class="name"></td>
                <td><input type="text" class="gender"></td>
                <td><input type="text" class="age"></td>
            </tr>
        </tbody>
    </table>
    <button id="insertRowBtn">Insert Row</button>
    <button id="deleteRowBtn">Delete Current Row</button>
</body>
</html>