Display Object as a node tree in HTML with clickable trace back to root node
It's always hard to guess, what the interviewer actually wanted. However, here are some thoughts mostly on style and markup.



Arrow function

You're using an arrow function in global scope, where it doesn't add value by binding this:


tree = (lvl, parent = 0, node, data) =&gt; {}



I would stick with a normal function here. It is also more readable. There's a discussion on SO – When should I use Arrow functions in ECMAScript 6? – which also explain why and where arrow functions are beneficial.

Readability

Here are some parts, that are hard to read:


arrNodeParent[node] = parent==0?0:parent-1;
n = node+=1;
(data.children.length)&amp;&amp;data.children.forEach(e=&gt;tree(lvl+1, node, n, e));



Especially the last line. While it makes use of JavaScript's way to handle logical expressions, I would say: This is not Code Golf but production code. So readability and quick understanding of the code, even tomorrow, is more important then saving a few bytes by creating one-liners.

Inconsistent use of keywords

Sometimes you declare variables using let, often you don't. Sometimes const could be used instead. Also, think twice before using var and check whether globals are really necessary for your function.

Indentation

Your Indentation is inconsistent. Sometimes it's two, sometimes it's four characters. Some lines are totally off, like here:


    complete = false;
        currNode = $(this);
  while(!complete){



HTML

Semantics/nesting


  It should reflect parent-child relationship by appropriate element nesting and indentation.


A div and also span are the elements with no semantic meaning, which make them not the first choice for a relationship like that. You also don't nest the elements to reflect that, you simply list them:


&lt;div class="tree"&gt;
    &lt;div class="node lvl0" node="1" parent="0"&gt;Earth&lt;/div&gt;
    &lt;div class="node lvl1" node="2" parent="1"&gt;Australia&lt;/div&gt;
    &lt;div class="node lvl2" node="3" parent="2"&gt;Sydney&lt;/div&gt;
&lt;/div&gt;



Adding a class like level-n does not add semantics to HTML.

You can change the markup to a nested list for example:

&lt;ul&gt;
    &lt;li&gt;
        Earth
        &lt;ul&gt;
            &lt;li&gt;
                Australia
                &lt;ul&gt;
                    &lt;li&gt;Sydney&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;


Invalid markup

You add two attributes node and parent to each element. These aren't valid HTML attributes. If you want to use your own custom ones, use data-*-attributes, like:

&lt;li data-node="1" data-parent="0"&gt;Earth&lt;/li&gt;


jQuery

Yes, the task says, you can use any open source library you need. But it also says they like simplicity. So adding 87 kB of JavaScript to simply attach an event handler and to select/create a few HTML elements seems like a huge overhead to me. If the library doesn't help building the actual tree, I would stick to vanilla JavaScript in this case.