Add separator to textarea values if there is more than one existing (Javascript)

Question

I am new to Javascript and wish to append a textarea with some values on click. Already managed how to add them using the snippet below but I need an update for it.

Basically, if there is more than one values in there, when clicking the "button" for the next value, it should insert a separator "|" , which can be set in form of a prefix or something.

Example behaviour:

I have an empty textarea with the id "attribute15" and few spans with the values: "Red" "Green" "Blue". When i click on each of the spans the textarea is filled with "RedGreenBlue". However, I want that if I already clicked the "Red", when going for the next value, it automatically adds a "|" separator between values so it becomes "Red|Green|Blue".

Any help is greatly appreciated. Thanks !

Here is my current snippet

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

Answer 1

Simply check for if the textarea already has text inside it, and then append a | if there is.

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