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" width="600" height="100" class="svgMain" ></svg>
    </div>

JavaScript

var myApp = angular.module('myApp', []);
function makeSVG(tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs)
                el.setAttribute(k, attrs[k]);
            return el;
        }
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++;
           var result = makeSVG("circle",{"cy":scope.rectCount * 21,"cx":"200","fill":"red","r":"10"});
           document.getElementById("svg-wrapper").appendChild(result);
        });
    }
});