JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <div add-job-question></div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.questions = [];
});

app.directive('addJobQuestion', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        scope: {
            questions: '='
        },
     
        link: function ($scope, $element) {
             var questionhtml = '<div ng-repeat="question in questions">'+
			'<input type="text" ng-model="question.questions" />'+
		 	'<button ng-click="removeInput($index)">Remove</button>'+
			'</div>'+
			'<button ng-click="addInput()">add input</button>';
		
            element.append(questionhtml);
                          
            $scope.questions = [];

            $scope.addInput = function () {
                $scope.questions.push({
                    question: ''
                });
            }

            $scope.removeInput = function (index) {
                $scope.questions.splice(index, 1);
            }
        }
    }
}]);