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>
					<br>
					
					<div id="tempUnavail"></div>
					
					</fieldset>

</div>

TypeScript

var app = angular.module("satUnav-app", []);
app.controller("satUnav-ctrl", function($scope) {
	
	var numUnavail = 0;
	
	var myUnavail = ' <select>' + 
						'<option></option>'+
						'<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" id="startstoplabel">Start</label>' +
					'<input type="datetime-local">' +
					'<label for="tempUnavail" id="startstoplabel">Stop</label>' + 
					'<input type="datetime-local">' +
					'<button type="button" data-ng-click="removeUnavailability()"> Remove</button> ';
	
	
	unavailabilities="";
	
	$scope.addUnavailability = function () {
		++numUnavail;
		unavailabilities += myUnavail;
		document.getElementById("tempUnavail").innerHTML = unavailabilities;
	}
	
	$scope.removeUnavailability = function () {
		--numUnavail;
		document.getElementById("tempUnavail").innerHTML.remove();
	}

	
});