Untitled

var answerScroll = $( "#answerScroll" );
var answers = $( "#answers" );
var answersList = $( "#answers > li" );
var singleAnswer = $( "#answers > li" ).first();
var answerScrollHeight = $( "#answerScroll" ).height();
var questionList = $( "#questions" ).children();

//Setup
$( "#answerScroll" ).height(answerScrollHeight);
$( "#answers" ).height((answerScrollHeight * 2) - (singleAnswer.height() * 2)).css({
    "margin-top": (answerScrollHeight - singleAnswer.height())
  });;
$( "#answerScroll" ).scrollTop(answerScrollHeight - singleAnswer.height());

// Click handler
$( "#answers > li" ).click(function(event) {
    var self = this
    var content = event.target.innerText;
    questionList.each(function(index, node) {
        var jNode = $(node);
    var nodeRect = jNode[0].getBoundingClientRect();
        if (event.clientY >= nodeRect.top && event.clientY <= nodeRect.bottom) {
            console.log(jNode.children().first());
            if (jNode.children().first().html() == "") {
            jNode.children().first().html(content);
                self.remove();
            }
        }
    });
});


<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Tillgänglighetsexempel skapat av Li Education">
    <meta name="author" content="Lin Education">

    <title>Lin Education - Tillgänglighetsexempel - Startsida</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body style="margin-top: 20px">
  <div class="container">
    <div class="col-xs-6">
      <ul class="list-group" id="questions">
        <li class="list-group-item">
          <span class="badge"></span>
          Cras justo odio
        </li>
        <li class="list-group-item">
          <span class="badge"></span>
          Dapibus banana okej
        </li>
        <li class="list-group-item">
          <span class="badge"></span>
          jaja okej bra bra
        </li>
        <li class="list-group-item">
          <span class="badge"></span>
          Banana hammock
        </li>
      </ul>
    </div>
    <div class="col-xs-6">
      <div id="answerScroll" style="overflow:scroll">
        <ul class="list-group" id="answers">
          <li class="list-group-item">
            A
          </li>
          <li class="list-group-item">
            B
          </li>
          <li class="list-group-item">
            C
          </li>
          <li class="list-group-item">
            D
          </li>
        </ul>
      </div>
    </div>
  </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/crazylist.js"></script>
  </body>
</html>