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');
    $(this).addClass('a');
  setLeft = true;
  new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
    $('.rightSide img').removeClass('b');
    $(this).addClass('b');
  setRight = true;
  new drawLine('.a', '.b', '.line');
});

You can use a flag variables and when click on an image from the right, set the right flag variable to be true and do the same with the other.

Then inside your function drawLine just check if the two flags are true then draw the line between a and b and set the two flag variables to false.