# Connecting images with lines

I tried to make match two pairs with lines quiz. I have couple of images on left, and couple of images on right, and I need to connect it with lines when you click on pair of images. It should work for any combinantion, so if I click for example on image 1 on left and image 3 on right, they should be connected with line. Then if I click again on image 1 on right, and image 2 on left, previous line should be deleted, and the new one between those two images need to be made.
Html snippet:

```function lineDistance(x, y, x0, y0){
return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};

function drawLine(a, b, line) {
var pointA = \$(a ).offset();
var pointB = \$(b).offset();
var pointAcenterX = \$(a).width() / 2;
var pointAcenterY = \$(a).height() / 2;
var pointBcenterX = \$(b).width() / 2;
var pointBcenterY = \$(b).height() / 2;
var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);

// Set Angle
\$(line).css('transform', 'rotate(' + angle + 'deg)');

// Set Width
\$(line).css('width', distance + 'px');

// Set Position
\$(line).css('position', 'absolute');
if(pointB.left < pointA.left) {
\$(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
} else {
\$(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
}
}
new drawLine('.a', '.b', '.line');```
```<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<div id="old" class="left_side one_half svg left">
<a target="_blank" rel="nofollow" href="#" data-number="1"><img class="a" src="assets/svg/Kerze.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-number="2"><img src="assets/svg/Telefon.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-number="3"><img src="assets/svg/Schreibmaschine.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-number="4"><img src="assets/svg/TV_old.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-number="5"><img src="assets/svg/Zeitstopper.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-number="6"><img src="assets/svg/Besen.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-number="7"><img src="assets/svg/Waschen.svg"></a>
</div>
<div class="left_side one_half svg right">
<a target="_blank" rel="nofollow" href="#" data-letter="NS"><img src="assets/svg/Iwatch.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-letter="RT"><img src="assets/svg/Laptop.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-letter="TE"><img src="assets/svg/Staubsauger.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-letter="IN"><img src="assets/svg/Waschmaschine.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-letter="EI"><img src="assets/svg/TV_new.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-letter="AL"><img src="assets/svg/Gluehbirne.svg"></a>
<a target="_blank" rel="nofollow" href="#" data-letter="BE"><img class="b" src="assets/svg/Iphone.svg"></a>
<div class="line"></div>
</div>
</div>```

I manage to make a line between two images (from class a to class b), and it is always calculated to be exactly on right angle, but I can not make it appear to work as I described above. Any ideas? Thanks.

```var setLeft = false, setRight = false;
\$('.leftSide img').click(function(){
\$('.leftSide img').removeClass('a');
setLeft = true;
new drawLine('.a', '.b', '.line');
});
\$('.rightSide img').click(function(){
\$('.rightSide img').removeClass('b');