title: How to connect two HTML elements avoiding other elements
body: <p>I've this HTML/CSS structure: <a href="https://codepen.io/Pestov/pen/BLpgm" rel="nofollow noreferrer">Codepen</a></p>
  <p>I need to connect two HTML elements with a line when I choose them (clicked on first element and then second element).</p>
  <p>I've already tried to draw straight line between them and it's successful. But the problem is, this line should avoid other HTML elements.</p>
  <p>I'm choosing two elements like this:</p>
  <pre class="lang-js prettyprint-override"><code>let selected;
  let count = 0;
  
  $('a').on('click', function(){
      selected = $('.selected');
      if (!$(this).hasClass('selected') &amp;&amp; count !== 2){
          count++;
          $(this).addClass('selected count' + count);
      } else {
          $(this).removeClass();
          count--;
      }
  
      if (count === 2) {
          // Here I'll draw line
      }
  });
  </code></pre>