Using jQuery to create hover states for list elements

Question

I'm currently working on a project where I want speech bubbles to pop up next to the list item being hovered over. Each speech bubble has information pertaining to the specific item being hovered over. In order to have each speech bubble with the correct information show up next to the correct item I have created 6 different .move (.move1, .move2, .move3. etc) classes which each have different positions set for each case of speech bubble. Here is the jsfiddle of what I'm talking about:

https://jsfiddle.net/sLemf2z0/1/

You can see I'm trying to create a loop that applies the correct .move class to the correct list item being hovered over but currently it is not working. How would I go about getting my .move classes to apply to the correct list item hovers with a javascript/jquery loop?

Here is my html, css and javascript outside of jsfiddle:

HTML

<ul class="grid1Ul">

          <li>&nbsp;Arthritis
              <ul class="clearfix ">
                 <li class="subLi">Arthritis is not good for you.</li>   
              </ul>
          </li>
          <li>Back &amp; Neck Pain
              <ul class="clearfix ">
                 <li class="subLi">Neck Pain is not awesome at all</li>   
              </ul>
          </li>
          <li>&nbsp;&nbsp;&nbsp;Muscle Strains/Sprains
              <ul class="clearfix ">
                 <li class="subLi">Muscle strins is not awesome at all</li>   
              </ul>
          </li>
          <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sport/Auto/Work Injuries
              <ul class="clearfix">
                 <li class="subLi">Sports and Auto injuries are definitely not awesome</li>   
              </ul>
          </li>
          <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Orthopedic Post Surgical
              <ul class="clearfix">
                 <li class="subLi ">Surgery is not very awesome either</li>   
              </ul>
          </li>
          <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gait and Balance Training
              <ul class="clearfix">
                 <li class="subLi">gait and balance training is awesome!!!!!!</li>   
              </ul>
          </li>

 </ul>

CSS

.grid1Ul {
    color: #982304;
    font: italic 700 35px / 48px Arial;
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.32);
    list-style-type: none;
    position: absolute;
    top: 391px;
    left: 121px;
    line-height: 1.7em;
    z-index: 3;
}

.gridUl li {
   position: relative;
}

.subLi {
   list-style-type: none;   
}

.grid1Ul li ul {
    position: absolute;
    left: -9000px;
    font-size: .4em;
    width: 300px;
    line-height: 1.5em;
    text-shadow: none;
    color: black;
    width: 600px;
    height: 100px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 20px;
    padding: 20px 20px 0 20px;
    box-shadow: 5px 5px 10px lightgrey;
}

li ul.move1 {
   bottom: 350px;
   left: 140px;
}

li ul.move2 {
   bottom: 290px;
   left: 290px;
}

li ul.move3 {
   bottom: 230px;
   left: 410px;
}

li ul.move4 {
   bottom: 170px;
   left: 470px;
}

li ul.move5 {
   bottom: 110px;
   left: 520px;
}   

li ul.move6 {
   bottom: 50px;
   left: 575px;
}


.grid1Ul li ul:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 20px;
    top: 120px;
    border: 10px solid;
    border-color: #666 transparent transparent #666;
}

.grid1Ul li ul:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 21px;
    top: 120px;
    border: 9px solid;
    border-color: #fff transparent transparent #fff;
}

Javascript/Jquery

 for(i = 1; i < 7; i++) {

        var numString = "" + i;

       $(".grid1Ul li:nth-of-type(" + numString + ")").hover( function() {
           $(this).children().toggleClass("move" + numString);   
       });

    }

Answer 1

jQuery .hover() takes two arguments, handlerIn and handlerOut ( mouseenter and mouseleave )

Also, since you're using jQuery why not use .each() instead of the for() loop?

Something like:

//each gives us index to utilize
$('.grid1Ul > li').each( function( index ) {
    $(this).hover( function() {
        //index is 0 - based, so we add one
        $( this ).children().addClass( "move" + ( index + 1 ) );
    }, function() {
        $( this ).children().removeClass( "move" + ( index + 1 ) );
    });
});

https://jsfiddle.net/Camwyn/ssduqd5f/