JSFiddle - React, Tailwind, and code Playground

by bullrout

HTML

<div  data-ng-app="ui.modules" data-ng-controller="editForm">
	<div add-to-form data-ng-repeat="item in items">
		<div class="row form-line"></div>
	</div>
	<div class="row">
		<div class="col-sm-offset-4 col-sm-3">
			<button type="button" class="btn btn-default" data-ng-click="add()">Add another number</button>
		</div>
	</div>
</div>

JavaScript

var uimodif = angular.module("ui.modifications", []);
uimodif.directive('addToForm', function () {
	return {
		restrict:'A',
		replace: true,
		template:
			'<div class="form-group" type="{{item.id}}">' +
			'	<label for="phone" class="col-sm-4 control-label">Phone-{{item.id}}-</label>'+
			'	<button type="button" class="form-remove close close-primary" aria-hidden="true" data-ng-controller="editForm" data-ng-click="remove(this)">x</button>'+
			'	<div class="col-sm-3 form-group">'+
			'		<div class="select-menu">'+
			'			<i class="caret"></i>'+
			'			<select id="phone" class="form-control">'+
			'				<option value="">Please select</option>'+
			'				<option value="mobile">Mobile</option>'+
			'				<option value="home">Home</option>'+
			'				<option value="work">Work</option>'+
			'			</select>'+
			'		</div>'+
			'	</div>'+
			'	<div class="col-sm-3 form-group">'+
			'		<input type="text" class="form-control" id="phoneNumber">'+
			'	</div>'+
			'</div>',
		transclude:true,
		scope:false
	};
});

var uimod = angular.module('ui.modules', ['ui.modifications']);
uimod.controller('editForm', ["$scope", function ($scope) {
	var id = 1;
	$scope.items = [ new Items(id) ];
	$scope.add = function() {
		$scope.items.push(new Items(++id));
	};
	$scope.remove = function(item) {
		$scope.$parent.$parent.items.splice(item.$index, 1);
	};
	function Items(ID) {
		this.id = ID;
	}
}]);