JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/ng-template"  id="tree_item_renderer.html">
    
    <span conditional-operator></span>
    <span field-name></span>
    
    
    <span operator></span>
    <input type="text" ng-model="data.valueType">
    
    <input type="text" ng-model="data.actualValue">
        
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
        <div ng-show="data.showFooter">
           Mandatory: {{data.set.mandatory}}
        <button ng-click="addBlock(data)">Add Block</button>
        <button ng-click="deleteBlock($index)">Delete Block</button>
        </div>
</script>
        
<script type="text/ng-template"  id="tree_word_renderer.html">
    {{data.conditionalOperator}} {{data.field1}} {{data.operator}} {{data.actualValue}}
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_word_renderer.html'"></li>
    </ul>
</script>
        
<script type="text/ng-template"  id="conditionalOperator.html">    
    
     
    <select ng-model="data.conditionalOperator" ng-options="c for c in conditionalOperators">
    
</script>
    
    <script type="text/ng-template"  id="FieldName.html">    
    
     
    <select ng-model="selectedOption" ng-options="c.name group by c.type for c in fieldNames" ng-change="changeOperators()">
    
</script>
        
        <script type="text/ng-template"  id="Operator.html">    
    
     
    <select ng-model="optionObj" ng-options="c.name for c in operators">
    
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    <li ng-repeat="data in tree" ng-include="'tree_word_renderer.html'"></li>
</ul>

CSS

ul {
    background: none;
    list-style:none;
}
li {
    background: none;
}

JavaScript

var myApp = angular.module("myApp", []).
controller("TreeController", ['$scope', function ($scope) {
    $scope.conditionalOperators = ['If','and','or','and()','or()'];
    $scope.fieldNames = [
         { id:'', type:'String', name:'Study Name'},
        ,{ id:'', type:'String', name:'GBU'},
        ,{ id:'', type:'Number', name:'IO Hierarchy'},
        ,{ id:'', type:'Date', name:'Geography'},
        ,{ id:'', type:'Boolean', name:'Lead Supplier'}
    ];
    $scope.selectedOption = $scope.fieldNames[1];
    
    $scope.changeOperators = function() {
        alert();
    };

    $scope.add = function (data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({
            conditionalOperator: "IF",
            field1: 'AAAA',
            valueType: 'value of field',
            actualValue: 'sample field value',
            operator: '!=',
            showFooter: false,
            nodes: [],
            set: {
                mandatory: false
            }
        });
    };

    $scope.addBlock = function () {
        console.log($scope);
        //append new prototyped object to tree
        $scope.tree.push({
            conditionalOperator: "IF",
            field1: 'blank',
            valueType: 'blank',
            actualValue: 'blank',
            operator: '=',
            nodes: [],
            set: {
                mandatory: 'true'
            }
        });
    };

    $scope.delete = function (data) {
        data.nodes = [];
    };

    $scope.deleteBlock = function (index) {
        //dont splice if first block
        //as nothing will remain on the page if all are deleted
        if (index > 0) {
            $scope.tree.splice(index, 1);
        }
    };

    $scope.tree = [{
        conditionalOperator: "If",
        field1: 'Study Name',
        valueType: 'value of field',
        actualValue: 'sample field value',
        operator: '!=',
        showFooter: true,
        nodes:...