How to connect two html elements avoiding other elements : <p>I've this html/css structure: <a href="https://codepen.io/Pestov/pen/BLpgm" rel="noreferrer">Codepen</a></p>

<p>I need to connect two html elements with 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>
