Change title in span tag based on div name
<p>I have a bit of a problem I cant figure out.</p>

<p>I have a slideshow on my page using jquery. </p>

<pre><code>&lt;div id="carousel"&gt;
    &lt;div id="round"&gt;
       &lt;div class="box box-sec"&gt;
           &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"&gt;&lt;/a&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;p&gt;
                  Peace of Mind  &lt;span&gt;at the best rate possible...&lt;/span&gt;
                  &lt;a href="#"&gt;Click here for more&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
        &lt;/div&gt;
       &lt;div class="box box-easy"&gt;
            &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"&gt;&lt;/a&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;p&gt;
                  Peace of Mind  &lt;span&gt;at the best rate possible...&lt;/span&gt;
                  &lt;a href="#"&gt;Click here for more&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="box competitive"&gt;
            &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"&gt;&lt;/a&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;p&gt;
                  Peace of Mind  &lt;span&gt;at the best rate possible...&lt;/span&gt;
                  &lt;a href="#"&gt;Click here for more&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="box personal"&gt;
            &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"&gt;&lt;/a&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;p&gt;
                  Peace of Mind  &lt;span&gt;at the best rate possible...&lt;/span&gt;
                  &lt;a href="#"&gt;Click here for more&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="box business"&gt;
            &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"&gt;&lt;/a&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;p&gt;
                  Peace of Mind  &lt;span&gt;at the best rate possible...&lt;/span&gt;
                  &lt;a href="#"&gt;Click here for more&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="box affiliate"&gt;
            &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg"&gt;&lt;/a&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;p&gt;
                  Peace of Mind  &lt;span&gt;at the best rate possible...&lt;/span&gt;
                  &lt;a href="#"&gt;Click here for more&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
        &lt;/div&gt;
       &lt;div class="arrows"&gt;
        &lt;div class="next"&gt;&lt;span&gt;Test&lt;/span&gt;&lt;img src="_includes/images/icons/rarr.png" /&gt;&lt;/div&gt;
        &lt;div class="prev"&gt;&lt;span&gt;Test&lt;/span&gt;&lt;img src="_includes/images/icons/larr.png" /&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>only 1 slide is active at a time, I want to somehow find the name of the next div, and write that into the "Test" span tags so that it shows up on hover and if clicked the span tag will then get the name of the next div and update itself, does this make sense? thanks </p>

<hr>

<p>ADDED FIDDLE 
<a href="http://jsfiddle.net/TNRMk/" rel="nofollow">http://jsfiddle.net/TNRMk/</a></p>

<hr>

<p>Ive tried this with no luck</p>

<pre><code>$('.arrows').click(function() {
        $(".next span").html($('.roundabout-in-focus').next().attr('name'));
        $(".prev span").html($('.roundabout-in-focus').prev().attr('name'));
    });
</code></pre>
