JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div data-ng-app="satUnav-app" data-ng-controller="satUnav-ctrl">

					<fieldset>
					<legend>Temporal Un-Availabilities</legend>
					<button type="button" data-ng-click="addUnavailability()"> Add</button>
					<br>
					
					<div ng-repeat="unavail in unavailabilities">
					  <select ng-model="unavail.selection">
              <option>PRN 01 (ID:401)</option>
              <option>PRN 02 (ID:402)</option>
              <option>PRN 03 (ID:403)</option>
              <option>PRN 04 (ID:404)</option>
            </select>
            <label for="tempUnavail">Start</label>
            <input type="datetime-local" ng-model="unavail.start">
            <label for="tempUnavail">Stop</label>
            <input type="datetime-local" ng-model="unavail.stop">
            <button type="button" data-ng-click="removeUnavailability($index)">Remove</button>
					</div>
					
					</fieldset>

</div>

TypeScript

var app = angular.module("satUnav-app", []);
app.controller("satUnav-ctrl", function($scope) {

	$scope.unavailabilities = [];
	
	$scope.addUnavailability = function () {
  	$scope.unavailabilities.push({});
	}
	
	$scope.removeUnavailability = function (idx) {
  	$scope.unavailabilities.splice(idx, 1);
	}
});