title: Add separator to elements with same class
body: <p>This html:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;a class='link-separated'&gt;foo&lt;/a&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
    &lt;a class='link-separated'&gt;foo&lt;/a&gt;
    &lt;a class='link-separated'&gt;bar&lt;/a&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;a class='link-separated'&gt;foo&lt;/a&gt;
      &lt;a class='link-separated'&gt;bar&lt;/a&gt;
      &lt;a class='link-separated'&gt;xyz&lt;/a&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>will produce:</p>
  
  <pre><code>foo
  foo bar
  foo bar xyz
  </code></pre>
  
  <p>What I want to get is:</p>
  
  <pre><code>foo
  foo | bar
  foo | bar | xyz
  </code></pre>
  
  <p>I've managed something like this: <a href="https://jsfiddle.net/61yfcnjh/" rel="nofollow noreferrer">https://jsfiddle.net/61yfcnjh/</a> but this solution is weird - <code>.link-separated</code> is used twice. How can it be done better?</p>