JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myController">
    <div ng-repeat="stud in students">
        <div ng-hide="isEditForm">
            <span>{{stud.name}} - {{stud.age}}</span>
            <button ng-click="isEditForm=true;">Edit Student</button>
        </div>
        <div ng-show="isEditForm">
            <label>Enter Name</label><input ng-model="stud.name" />
            <label>Enter Age</label><input ng-model="stud.age" />
            <button ng-click="isEditForm=false;">Save</button>
        </div>
    </div>
    <br/><br/>
    
    <div ng-hide="isAddForm">
        <button ng-click="isAddForm=true;">Add Student</button>
    </div>
    <div ng-show="isAddForm">
        <label>Enter name</label><input ng-model="newStudent.name" />
        <label>Enter Age</label><input ng-model="newStudent.age" />
        <button ng-click="addStudent()">Add</button>
        <button ng-click="isAddForm=false;">Cancel</button>
    </div>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.students = [
        {"name": "ABC", "age": 21},
        {"name": "DEF", "age": 22},
        {"name": "GHI", "age": 23},
        {"name": "XYZ", "age": 24}
    ];
    $scope.newStudent = {};
    $scope.addStudent = function () {
        if ($scope.newStudent.name && $scope.newStudent.age) {
            $scope.students.push({"name": $scope.newStudent.name,"age": $scope.newStudent.age});
            $scope.isAddForm = false;
        }
    };
});