Sidebar hover to change [bootstrap, jquery]

by dumptyd

HTML

<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">
<div class="container-fluid" style="padding:20px;">
  <div class="row">
    <div class="col-xs-4">
      <div class="list-group" id="sidebar">
        <a href="#" class="list-group-item active" data-idx='0'>
          Cras justo odio
        </a>
        <a href="#" class="list-group-item" data-idx='1'>Dapibus ac facilisis in
        </a>
        <a href="#" class="list-group-item" data-idx='2'>Morbi leo risus
        </a>
      </div>
    </div>
    <div class="col-xs-8 text-center">
      <!-- <div class="text-muted">Hover to see stuff</div> -->
      <div class="list-group" id="ayy">
      </div>
    </div>
  </div>
</div>

JavaScript

(function($) {
	let listItems = [
  	['ayy', 'lmao'],
    ['bloop', 'bleeper'],
    ['heyo', 'boope']
  ];
	var createList = function(idx, list) {
  	let elem = list[idx];
    let html = elem.map(x => {
    	return `
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">${x}</h4>
          <p class="list-group-item-text">${(x + ' ').repeat(10)}</p>
        </a>`;
    });
    console.log(html.join());
    $('#ayy').html(html.join(''));
  };
	$(document).ready(function() {
  	createList(0, listItems);
    $('#sidebar > .list-group-item').hover(function(e) {
    	let idx = parseInt($(this).data('idx'));
      createList(idx, listItems);
      $(this).siblings().removeClass('active');
      $(this).addClass('active');
    });
  });
  
})(jQuery);