Using querySelectorAll on checkboxes to display an array

My idea is when you hover checkbox number 1, the same index number will display the same car from the same position.

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];

So if I hover over the first checkbox it will log "Bmw", if I hover over the fourth, "Audi" will be logged.

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];
var chb = document.querySelectorAll("input[type=checkbox]");

for (var i = 0; i < chb.length; i++) {
  chb[i].addEventListener("mouseover", test);
}

function test() {
  console.log(carArray[i]);
}

body {
  display: flex;
  flex-direction: column;
}

<div><input type="checkbox"> 1</div>
<div><input type="checkbox"> 2</div>
<div><input type="checkbox"> 3</div>
<div><input type="checkbox"> 4</div>
<div><input type="checkbox"> 5</div>
<div><input type="checkbox"> 6</div>