JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
  <button ng-click="createElement()" id="btnCreateElement" ng-disabled="isDisabled">ClickToAdd</button>

  <div id="target">

  </div>
  <button ng-click="toogleElement()">ClickToAdd</button>
  <div class="tryIt" ng-if="showDiv"></div>
  <div class="tryIt" id="redDiv" ng-if="!showDiv"></div>

</div>

CSS

.test {
   width: 400px;
   height: 30px;
   background: green;
   margin: 10px 0;
 }
 
 .tryIt {
   width: 200px;
   height: 200px;
   background: #00B3E3;
   margin-left: 50%;
   position: relative;
 }
 
 #target>div:nth-child(5) {
   background: blue;
 }
 
 #redDiv {
   background: red;
 }
 
 #btnCreateElement {
   cursor: pointer;
 }
 
 #btnCreateElement:disabled {
   cursor: no-drop;
 }

JavaScript

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.showDiv = true;
  $scope.isDisabled = false;
  var clicks = 0;

  $scope.createElement = function() {
    if (clicks == 5) {
      $scope.isDisabled = true;
    } else {
      var newDiv = angular.element('<div class="test"></div>');
      var newDivContainer = document.getElementById("target");
      // angular.element(newDivContainer).append(newDiv);
      angular.element(".test").css("disabled","true");
      clicks += 1;
      if (clicks == 5) {
        $scope.isDisabled = true;
      }
    }
  }
  $scope.toogleElement = function() {
    $scope.showDiv = !$scope.showDiv;
  }


});