JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<div id="path"></div>
<div id="container"></div>

CSS

div{padding-left: 10px;}

JavaScript

var datas = {
	"tree": [
		{
			"name": "name1",
			"tree": [
				{"name": "name2"},
				{"name": "name3"},
				{
					"name": "name4",
					"tree": [
						{"name": "name5"},
						{"name": "name6"}
					]
				},
				{"name": "name7"}
			]
		},
		{
			"name": "name8",
			"tree": [
				{"name": "name9"}
			]
		}
	] 
};

// Build tree function
var buildTree = function(tree, container, parentObject) {
    _.each(tree, function(item) {
        var newContainer = document.createElement('div');
        var button = document.createElement('button');
        button.id = item.name;
        button.innerHTML = item.name;
        item.parent = parentObject;
        newContainer.appendChild(button);
        
        container.appendChild(newContainer);
        if(item.tree) buildTree(item.tree, newContainer, item);
    });
};
buildTree(datas.tree, $('div#container')[0], null);

// Click events
$('div#container').on('click', 'button', function(e) {
    // Get the target object
    getObject(datas.tree, e.target.id, function(target){
        target.name = 'newName ' + Math.random();
        $('div#container').empty();
        buildTree(datas.tree, $('div#container')[0], null);
        
        // Get the path and display it
        $('div#path').html('root/' + getPath(target, ''));
    });
});

// The get object function
var getObject = function(container, id, callback) {
    _.each(container, function(item) {
        if(item.name === id) callback(item);
        else if(item.tree) getObject(item.tree, id, callback);
    });
};


// Get path of an object
var getPath = function(target, path) {
    if( target.parent ) {
        path = target.parent.name + '/' + path;
        return getPath(target.parent, path);
    }
    else return path;
};