JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" id="wrapper" ng-controller="wrapperController">
    <div class="left-sidebar pull-left container-fluid">
        
                <button add-rectangle>click!</button>    
    </div>
    <div id="plan-wrapper">
        <svg id="svg-wrapper" class="svgMain" ></svg>
    </div>

JavaScript

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

function wrapperController($scope) {
	 $scope.rectCount = 0,$scope.arcCount = 0,$scope.ellipseCount = 0;
}

myApp.directive('addRectangle', function() {
    return function(scope, element, attr) {
        element.bind('click',function() {
            scope.rectCount++;
            angular.element(document.getElementsByClassName('svgMain')).append('<circle r=5 cx=200 cy=200 fill=red data-scope='+scope.rectCount +' />');
            

        });
    }
});