How to connect two HTML elements avoiding other elements

Question

I've this HTML/CSS structure: Codepen

I need to connect two HTML elements with a line when I choose them (clicked on first element and then second element).

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.

I'm choosing two elements like this:

let selected;
let count = 0;

$('a').on('click', function(){
    selected = $('.selected');
    if (!$(this).hasClass('selected') && count !== 2){
        count++;
        $(this).addClass('selected count' + count);
    } else {
        $(this).removeClass();
        count--;
    }

    if (count === 2) {
        // Here I'll draw line
    }
});

Answer 1

What you're describing would be extremely difficult to accomplish using html in the way you are. If you wanted a curving line, that avoids other elements, you'd most likely have to use an SVG path and some sort of pathfinding algorithm to calculate where it should go. Instead, I would recommend you try a solution using JavaScript and HTML5 Canvas. A good starting place might be examples from D3.js. D3 is meant for exactly the sort of chart you're looking to create.