title: Need index number of item in array on hover
body: <p>I'm relatively new to JavaScript and I'm working on what should be a simple project. I'm stuck though and I'd love some opinions on ways to get a solution. 
  I have a short products array like:</p>
  
  <pre><code>var products = [
     {
      name: "paper",
      price: 2.00,
      description: "White College-ruled Paper, 100 sheets",
      location: "Aisle 5"
     },
     {
      name: "pens",
      price: 5.00,
      description: "10 Pack, Black Ink Ball Point Pens"
      location: "Aisle 2"
     },
     {
      name: "paper clips",
      price: 0.50,
      description: "Silver Paper Clips, 100 count"
      location: "Aisle 6"
     }
    ]
  </code></pre>
  
  <p>I'm looping through this array using JS and printing the results to the page in a DIV with id of "output".</p>
  
  <pre><code>function print(message) {
    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = message;
  }
  
  for (var i = 0; i &lt; products.length; i += 1) {
    product = products[i];
    message += '&lt;div class="col-md-4" id="prod-block"&gt;';
    message += '&lt;p id="prod-description"&gt;' + product.name + ' ' + product.description + '&lt;/p&gt;';
    message += '&lt;h2 id="price"&gt;$' + product.price  + '&lt;/h2&gt;';
    message += '&lt;/div&gt;'
  }
  print(message);
  </code></pre>
  
  <p>All of this works just fine. I have my products on the page. Now, what I want is when the mouse hovers over any of the item divs, to show additional information (such as location) in a separate div. 
  My question is - how do you identify the index number of the item that is being hovered over? As of now, the index number only exists in my for loop and I can't figure out how to access it in a different function. </p>
  
  <p>Again, my knowledge is limited, so I'm not sure if writing the HTML in a for loop is even the best way to do this. I really appreciate any advice or criticism!!</p>