JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <div add-input>
        <button>add input</button>{{field}}: {{value}}</div>
        <div>
        <a>remove </a>
          
        </div>
</div>

JavaScript

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

app.controller('MyCtrl', ['$scope', function ($scope) {
    // Define $scope.telephone as an array
    $scope.field = [];
    $scope.value = [];
    // Create a counter to keep track of the additional telephone inputs
    $scope.inputCounter = 0;


}]);

// I've created this directive as an example of $compile in action. 
app.directive('addInput', ['$compile', function ($compile) { // inject $compile service as dependency
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // click on the button to add new input field
            element.find('button').bind('click', function () {
                // I'm using Angular syntax. Using jQuery will have the same effect
                // Create input element
                var input = angular.element('<div><input type="text" ng-model="field[' + scope.inputCounter + ']"><input type="text" ng-model="value[' + scope.inputCounter + ']"></div>');




                // Compile the HTML and assign to scope
                var compile = $compile(input)(scope);

                // Append input to div
                element.append(input);

                // Increment the counter for the next input to be added
                scope.inputCounter++;
            });
        }
    }
}]);