如果存在多个现有值（Javascript），则向textarea值添加分隔符

我是Javascript新手，希望在单击时添加一个带有一些值的textarea。 已经设法添加他们使用下面的片段，但我需要一个更新

基本上，如果其中有多个值，当单击下一个值的按钮时，它应该插入一个分隔符|，可以以前缀或其他形式设置分隔符

示例行为：

我有一个id为attribute15的空文本区域，几个跨度的值为：红-绿-蓝。 当我点击每一个跨距时，文本区域充满了红、绿、蓝。 但是，我希望，如果我已经单击了红色，在选择下一个值时，它会自动在值之间添加一个|分隔符，使其变为红色|绿色|蓝色

非常感谢您的帮助。谢谢

这是我当前的代码片段

  $(".<?php echo 'attribute15'; ?>").click(function(){
    var txt = $.trim($(this).text());
    var box = $("#<?php echo 'attribute15'; ?>");
    box.val(box.val() + txt);
  });

只需检查textarea中是否已经有文本，如果有，则添加一个|

if (box.val().length > 0)
    box.val(box.val() + "|" + txt);
else
    box.val(txt);

---

寻求调试帮助的问题此代码为什么不起作用？必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：。感谢您的回复。我已经编辑了我原来的帖子，并添加了我想要的行为。非常感谢@4castle，你做到了！