如何将onclick侦听器添加到元素以获取相应的文本

Question

我有一个预标签列表

<pre class="fruit">mango</pre>
<pre class="fruit">apple</pre>
<pre class="fruit">guava</pre>

现在我动态创建div标签并显示在预标签旁边。就像这个

this is the jsfiddle preview with all the codes

现在我想要的是当我点击它旁边的pre时获取div的文字。例如，如果我点击第一个绿色div我想获得mango。

但问题是我无法理解如何将div添加到div中以实现此功能。可以更改预标签的内容。

我是怎么做的

var box=box=document.getElementsByClassName("fruit");
for(var i=0;i<box.length;i++){
            var mydiv=document.createElement("div");
            mydiv.onclick= function(){func(i);};
}

function func(x){
    //alert(x); // x is always 4 because when this get fired i has increased to 4 in the loop.  
    var text = box[x].innerText || box[x].textContent;
    alert(text);
}

问题是当funt() i的触发值发生变化时。我可以实现这个吗？