网页文章注释功能

我在做一个网页文章注释的功能，比如用鼠标选择一句话，然后点击按钮后，可以在输入框中输入评语，注释之类的。提交后，鼠标划到那句话上，关于这句话的注释就会显示在旁边的一个文本框里。

newtext = '<span id="item'+ newid +'" class="highlight" onmouseover="highlight_on('+ newid +')" onmouseout="highlight_off('+ newid +')" onclick="addmoreAnn('+ id +', '+ newid +')">' + txt.toString() + '</span>';

我用newtext 去替换原来被选中的文字

现在问题是 比如我选中 “关于树形目录链接网页的问题”  里面的“树形目录”，添加注释1后。 我再选中“目录链接网页” 这个“目录”两个字 就归到 第二个注释2里去了。 只有划过”树形“才显示注释1， 鼠标划过”目录“ 只显示注释2.因为原先的   <span 1> 树形目录</span>  变成了<span 1>树形</span><span 2>目录链接网页</span> 。
请问有什么办法可以解决这个问题。 让我在划过 “目录”时，可以同时显示这两个注释。 然后“目录”的背景色，对比旁边两个词加深点。

或者有什么更好的办法来做这个功能
麻烦哪会大大帮帮忙啊。 刚学JS