Different hover functions get shared callback functionality

Question

Im making a program with bubbles of text. When you hover the text it is supposed to show another text instead. Each bubble have unique text strings stored in Json format. The problem is that they all get the same callback for the hover effect. Every bubbles text is set to the same as the last bubble in the datastructure.

Code:

     function createBubbles() {
            for ( var i = 0; i < bubbles.length; i++) {
              var bubbleInfo = bubbles[i];
              var text1=bubbleInfo['small_text'];
              var text2=bubbleInfo['full_text'];
              $('body').append(BubbleTemplate).children('#newBubble').attr("id",
                  'bubble' + i).hide().html('<a>'+text1+'</a>').hover(function(){
                    console.log("hover"+i);
                    $(this).children('a').css({'font-size': '14px'}).text(text2);
                  }, function(){
                    $(this).children('a').css({'font-size': '40px'}).text(text1);
                  });
            }
          }

Datastructure:

 var bubbles = [
          {
            "start": "0.05",
            "stop": "0.4",
            "small_text": "Head1",
            "full_text": "description1"
          },
          {
            "start": "0.3",
            "stop": "0.7",
            "small_text": "Head2",
            "full_text": "description2"
          },
          {
            "start": "0.35",
            "stop": "0.8",
            "small_text": "Head3",
            "full_text": "description3"
          }, ];

Html template:

<div id="newBubble" class="text-bubble animated"><a></a></div>

"Console.log("hover"+i)" always prints: hover3 even if I hover bubble 1