JSFiddle - React, Tailwind, and code Playground

by Hamza Nisar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>

<body ng-controller="MainCtrl">
	<button ng-click="add_username($index)">Add Username</button>
	<button ng-click="add_email($index)">Add Email</button>
	<div id="add"></div>

	<form ng-show="divShow == 'div1'">
		<label>Field Label(?)</label>
		<br/>
		<input ng-model="username.user">
	</form>
	<form ng-show="divShow == 'div2'">
		<label>Field Label(?)</label>
		<br/>
		<input ng-model="email.email">
	</form>
	<div ng-show="divShow">
		<label>Field Size(?)</label>
		<br/>
		<select>
			<option value="" disabled selected>Select Size</option>
			<option ng-click="changeToLarge()" ng-model="selected">Large</option>
			<option ng-click="changeToMedium()" ng-model="selected">Medium</option>
			<option ng-click="changeToSmall()" ng-model="selected">Small</option>
		</select>
	</div>
</body>

CSS

.selected{
    background-color: #f2dede;
}

JavaScript

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

app.controller('MainCtrl', function ($scope, $compile) {
    $scope.usernames = [];
    $scope.emails = [];
  var counter = 0;
    $scope.add_username = function (index) {
        $scope.usernames[counter] = { user: 'Username', size: 'col-sm-12' };
        var userDiv =
'<div ng-click="selectUser(usernames[\'' + counter + '\']);show(\'div1\',' + counter + ')" class="{{usernames[' + counter + '].size}}" ng-class="{selected : ' + counter + ' == active}">\n\
<label>{{usernames[' + counter + '].user}}</label>//click//</div>';
        var user = $compile(userDiv)($scope);
        angular.element(document.getElementById('add')).append(user);
        $scope.changeToLarge = function () {
            $scope.username.size = 'col-xs-12';
        };
        $scope.changeToMedium = function () {
            $scope.username.size = 'col-xs-6';
        };
        $scope.changeToSmall = function () {
            $scope.username.size = 'col-xs-4';
        };
        ++counter;
    };
    $scope.selectUser = function (val) {
        $scope.username = val;
    };

    $scope.add_email = function (index) {
        $scope.emails[counter] = { email: 'Email', size: 'col-sm-12' };
        var emailDiv =
'<div ng-click="selectEmail(emails[\'' + counter + '\']);show(\'div2\',' + counter + ')" class="{{emails[' + counter + '].size}}" ng-class="{selected : ' + counter + ' == active}">\n\
<label>{{emails[' + counter + '].email}}</label>//click//</div>';
        var email = $compile(emailDiv)($scope);
        angular.element(document.getElementById('add')).append(email);
        $scope.changeToLarge = function () {
            $scope.email.size = 'col-xs-12';
        };
        $scope.changeToMedium = function () {
            $scope.email.size = 'col-xs-6';
        };
        $scope.changeToSmall = function () {
            $scope.email.size = 'col-xs-4';
        };
        ++counter;
    };
    $scope.selectEmail = function (val) {
       ...